reactHooks实现一个简易redux

实现redux

顶层

• createContext创建共享的上下文
• useReducer使用类同redux

import React, {createContext, useContext, useReducer} from 'react';

const _STATE = createContext();
const _DISPATCH = createContext();

function App (){
    const initStatus = {
        count: 0
    };

    const reducer = (state, action) => {
        switch (action.type) {
            case 'add':
                return {
                    ...state, count: state.count + 1
                };
            case 'reduce':
                return {
                    ...state, count: state.count - 1
                };
            default:
                throw 'Error';
        }
    }

    const [state, dispatch] = useReducer(reducer, initStatus);       //传入一个reducer函数和初始值

    return <React.Fragment>
            <_STATE.Provider value={state}>
                <_DISPATCH.Provider value={dispatch}>
                    <Child />
                </_DISPATCH.Provider>
            </_STATE.Provider>
        </React.Fragment>
}
......

需要使用状态的function

......
const creator = (type, payload, error) => {
  return {
      type: type,
      payload,
      error
  }
}
function Child(){
  const state = useContext(_STATE);   //获取共享的上下文
  const dispatch = useContext(_DISPATCH);

  return <React.Fragment>
            <div>{state.count}</div>
            <button onClick = {() => dispatch(creator("add"))}>增加</button>
            <button onClick = {() => dispatch(creator("reduce"))}>减少</button>
        </React.Fragment>
}
......

顺带提一下useEffect

useEffect(() => {
    //do something
}, []);
//因为hooks函数每一次的render产生的函数和变量都是不一样的，所以当useEffect依赖某个变量时需要在第二个参数传入