useContext与useReducer结合实现数据共享

首先指出：使用useContext创建的对象负责数据的管理，也即是数据的共享，而使用useReducer负责共享数据的更新，每一次数据更新会导致页面重新渲染。

1.父组件

     

constaMyContext = createContext({});  //创建Context，管理共享数据
const defaultState = {            //存储数据的默认defaultState
        count:0,
        total:0,
    }              
 function reducer(state=defaultState,action) {   ///reducer负责操作数据
     if(action.type==="add") {
         console.log("add");
         return {...state,total:state.total+1}
     }
     return state;
 }
function Father() {      //父组件
 const [store,dispatch] = useReducer(reducer,defaultState);//创建reducer
                                          
    return (
        // 通过 state传递上下文 状态
        
        <MyContext.Provider value={{store,dispatch}}>  //MyContext.Provider下的组件均会获得
            
            <Counter shop={'一'}/>               //value 提供的{store,dispatch}对象
           
            <Counter shop={'二'}/>               //都可以被子组件Counter获取到

        </MyContext.Provider>
        
    )
}

2.子组件：

  

function Counter(props) {   
    const {store,dispatch} = useContext(MyContext);//使用MyContext获得value传入的对象，并解构
    return (                                    //至此，子组件获得带有数据的store和操纵
        <div>                                   //数据行为的dispatch。
            <h3>面馆{props.shop}</h3>
            <h2>老板，来{store.count}碗{size(big)}碗{type}</h2>
            <h4>{`总共发行${store.total}碗面`}</h4>
            <button onClick={()=>(dispatch({type:"add"}))} style={{"height":"40px"}}>加一碗</button>
         
        </div>
    );
}