useContext,useReducer构建redux

useContext和useReducer是react16.8之后新出的，用这两个可以构建一个redux，下面来看下

import React,{createContext}from 'react'
export default Context=createContext()

//reducer函数
function reducer(state=0,action){
	switch(action.type){
		case 'add':
			state=state+1;
			return state;
		case 'sub':
			state=state-1;
			return state;
		default:
			return state;
	}
}

import React,{useReducer} from 'react'
import reducer from './test.js'
import Context from 'context.js'
function Father(){
	const [state,dispatch]=useReducer(reducer,0)//useReducer接受两个参数，第一个是reducer函数                //，第二个是初始值
	return(
		<Context.Provider value={{state:state,dispatch:dispatch}}>
            <div>{state}</div>
			<Son></Son>
		</Context.Provider>
		
	)

}

import React,{useContext} from 'react'
import Context from './context.js'
export default function Son(){
	const {state,dispatch}=useContext(Context);
	
	return(<div>
        <span>{state}</span>
		<button onClick={()=>{dispatch({type:'add'})}}>
			点击
		</button></div>)
}

这样点击Son组件的按钮，Father和Son组件中的state值都会改变