Redux development steps

Before hooks, Redux was undoubtedly the preferred state management solution for many React projects, and folders needed to be separated before projects were created.

Redux three elements :(personal understanding)

  • Action: Stores function methods
  • Store: Store data
  • Reducer: data processing warehouse. It must be a pure function

folder

  • Actons (placement function method)export const pullGroupList = (data) => ({type: types.GROUPLIST_PULL, data })
  • Constants (Type type actiontypes.js for placing function methods)export const GROUPLIST_PULL = 'GROUPLIST_PULL'
  • Reducers (place data processing pure functions)
  • “Containers” (with actons, connect HOC, mapStateToProps and mapDispatchToProps)

New steps

In the context of an already built project:

  1. In the ActionTypesThe new type
  2. In the actonsNew function methods
  3. Reducers adds reduc.js to reducers,Write data processing pure functions and pass combineReducer and reduce
  4. The js added to containers willThe action is introduced into the component and connected to your component via a Connect HOC, adding two methods: mapStateToProps and mapDispatchToProps

useContext + useReducer

Redux state management function can be implemented using useContext+useReducer, so I wrote a small demo

But there are higher requirements, as follows:

Use useContext+useReducer to create something like React-Redux to manage state – output a Provider component that receives global store – output a connect function, Receive mapStateToProps mapDispatchToProps two method returns a connectHoc high-order component (property broker mode will store values passed to the component of props in)

Then found that not 😢

  1. How to output a Provider component that receives the global store?Import {createStore, applyMiddleware, compose} from 'redux'
  2. How to output a connect function, receiving mapStateToProps mapDispatchToProps?Import {bindActionCreators} from "redux"; import {connect} from "react-redux";
  3. How do I integrate Multiple Reducers?Import {combineReducers} from 'redux'

Only simple application, do not know how to unify the code.

Search answers:

  1. You can refer to Redux to write a CombineReducer, using array.prototype. reduce is very good implementation.
  2. Write the Provider to the outermost component to achieve global sharing.
  3. The store is written to the component to which it belongs.

Ask for advice, preferably one with code

2019/12/02 solution:

Output a Provider component that receives the global store

const Store = createContext();

export default function ReactApp() {
    const [state, dispatch] = useReducer(reducer, {count: 0, step: 0})

    return ( 
        <Store.Provider value={{state, dispatch}}>
            <Count/>
            <Step/>
        </Store.Provider>)
}

const Count = () => {
    const {state, dispatch} = useContext(Store)
    return useMemo(()=>(
        <Button onClick={() => dispatch({type: 'incCount'})}>incCount {state.count}</Button>
    ),[state.count,dispatch])
}
Copy the code
  1. createContext()Creating a globalstore;
  2. Store.ProviderimplementationStore delivery;
  3. useContext(Store)Use of globalstore.

UseMemo is similar to a connect function. If you compare connect to useMemo, the similarities are striking.

A common Redux component:

const mapStateToProps = state => (count: state.count);

const mapDispatchToProps = dispatch => dispatch;



class Count extends React.PureComponent {
  render() {
    return (
      <button onClick={() => this.props.dispatch("incCount")}> incCount {this.props.count} </button> ); }}export default Connect(
    mapStateToProps,
    mapDispatchToProps
)(Count)
Copy the code

A normal Function Component:

const Count = () => {
  const { state, dispatch } = useContext(Store);
  return useMemo(
    () => (
      <button onClick={() => dispatch("incCount")}>
        incCount {state.count}
      </button>
    ),
    [state.count, dispatch]
  );
};
Copy the code