备战面试！我用useContext和useReducer实现redux

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

redux作为主流的公共状态管理被大家使用，但有时候一些小型项目，并且我需要传递的数据也很少，这时候用redux就会有些麻烦，毕竟他的步骤多，需要新建的文件多，这时候不妨试一试useContext和useReducer这两个hooks来实现组件间的传值与修改，也是很方便的！ 1、首先我们新建一个公共的context.js组件

导入createContext，并且将他暴露出去
import {createContext} from 'react' 
const context = createContext()
export default context

2、创建reducer.js用来存放修改公共状态的函数，函数的写法和我们在redux中的函数的写法一致

const initialState= {
name:'小王',
age:23
}
export default function reducer(state=initialState,action){
switch(action.type){
    case 'updated' :
        return {...state,name:action.payload.name,age:action.payload.age}
    default : 
        return state
}
}

3、在需要传值的组件导入context和reducer，一般是父组件传给子组件或者孙组件

父组件里做的事情也很简单
import context from './context'
import Son from './Son'
import {useReducer } from 'react'
import reducer,{initialState} from './reducer'

const Func = () => {
//state是公共的状态
//dispatch是分发修改状态的指令，和redux中的用法一致
//reducer就是我们上面定义修改状态的函数
//initialState是state的初始值
const [state,dispatch] = useReducer(reducer,initialState)

return (
把需要接受值的组件用context.Provider包裹，然后value里面就是我们传给子组件的数据，这里我们把state的初始状态和修改state的方法dispatch传递给子组件
    <context.Provider value={{state,dispatch}}>
  <div>
  father
  <h1>{state.name}===={state.age}</h1>
  <hr></hr>
  <Son></Son>
  </div>
    </context.Provider>
)
};
export default Func;

4、子组件接收数据，并且修改数据

子组件需要导入context和useContext这个hook来接收
import context from './context'
import {useContext} from 'react'

const Func = () => {
const {state,dispatch} = useContext(context) //解构出来
const onClick = ()=>{
    通过传过来的dispatch分发指令，修改state的数据状态
    dispatch({type:'updated',payload:{name:'小李',age:88}})
}
return <div>
    son
    <h1>{state.name}===={state.age}</h1>
    <button onClick={onClick}>点我改名</button>
</div>
};
export default Func

此时我们可以看到父组件传递过来的数据，我们已经拿到

当我们点击按钮，通过dispatch({type:'updated',payload:{name:'小李',age:88}})分发指令，把name:'小李',age:88修改，可以看到父组件里的数据也就是reduce里存放的公共数据也被修改了