用context封装状态管理

封装：

context-manager.js文件：

import React from 'react';

export const MyContext = React.createContext(null);

 context封装、自定义函数useboard封装

import React, { useReducer, useContext } from 'react';
import initState from './state' //state初始状态

const myContext = React.createContext();

const initialState = () => {
  return { ...initState }
};
const reducer = (state, action) => {
  return { ...state, ...action }
};

const ContextProvider = props => {
  const [ state, dispatch ] = useReducer(reducer, {}, initialState);
  return (
    <myContext.Provider value={{ state, dispatch }}>
      {props.children}
    </myContext.Provider>
  );
};

const useBoard = () => {
  const contextValue = useContext(myContext);
  return contextValue;
};


export { ContextProvider, useBoard };

state状态存储：

const initialState = {
  id: '',
}

export default initialState

业务方调用：

import { ContextProvider } from '$context/reducer';
const Board = (props)=>{
  return (
    <ContextProvider>
      <MyBoard props={{ ...props }}/>
    </ContextProvider>
  )
}

function MyBoard({ props }) {
    const { state, dispatch } = useBoard();
    console.log('state, dispatch ', state, dispatch)
    //...
}

export default Board 

// 业务方使用
import React, { useContext } from 'react';
import { MyContext } from '$context/context-manager';
const { id } = useContext(MyContext);