如题，使用react hooks实现使用redux的效果，主要用到的钩子就是 useReducer， useContext
主要解决的问题：
- 函数式组件注入共享状态
- 使用react hooks实现简易版redux
- 多个reducer结合使用
- 抽离状态的组件化
首先来简单介绍一下 useReducer的用法：
// 申明一个reducer
export function todoReducer (state, action) {
switch(action.type){
case 'add': return [...state, action.data]
default: return state
}
}
export const initTodo = ['sleep', 'coding', 'sleep long']
// 在函数式组件中使用
import { useReducer } from 'react';
export function todoList () {
const [state, dispatch] = useReducer(todoReducer, initTodo)
return (<>
<ul>
{state.map((todo, index)=><li key={index}>{todo}</li>)}
</ul>
</>)
}
更新状态则可以使用 dispatch({type: 'add', data: 'do something'})的方式更新
可以看出这种方式，对于同一个
reducer function，每调用一次useReducer, 就会产生一个state和一个dispatch函数，那么要实现状态共享，我们就要把这两个东东共享给其他组件， 所以接下来要做的事情就是利用Context特性将这次调用useReducer得到的state和dispatch函数共享给其他组件
按照一下步骤重构代码：
1. 先把todoReducer抽离出来： 新建一个叫reducers的文件夹， 用来存放所有的reducer函数，然后在文件夹下面建一个todo.js的文件：
export const initTodo = ['sleep', 'coding', 'sleep long']
export function todo (state, action) {
switch(action.type){
case 'add': return [...state, action.data]
default: return state
}
}
2. 把useReducer提取出来写一个自定义个的钩子函数： 新建一个hooks文件夹，存放自定义钩子函数，然后在文件夹下面创建一个useStore.js的文件:
import { useReducer} from 'react';
import {todo, initTodo} from '../reducers/todo'
import {user, initUser} from '../reducers/user'
export const useStore = () => {
const store = {
user: useReducer(user, initUser),
todo: useReducer(todo, initTodo)
}
return store;
}
把所有的reducer引进来合并为一个store并导出
3. 开始使用自定义钩子useStore函数，并利用Context注入子组件： 写一个高阶函数组件，创建Context实例导出，并同时将上面的store注入子组件：
import React from 'react'
import { useStore } from '../hooks/store';
//导出Context对象给其他需要使用这个上下文的组件使用
export const Context = React.createContext()
export default (Comp) => (props) => {
const store = useStore()
return <Context.Provider value={store}>
{<Comp {...props} />}
</Context.Provider>
}
然后在使用这个高阶组件去包裹我们的App组件并导出：
import ContextHoc from './hoc/contextHoc'
...
export default ContextHoc(App);
4. 在其他组件中使用这个store:
// addTodo.js：
import React, { useState, useContext } from 'react';
import { Context } from "../hoc/contextHoc"
export default () => {
const [text, setText] = useState('')
const store = useContext(Context);
const [state, dispatch] = store.todo
const onKeyDown = (e) => {
if(e.key === 'Enter'){
dispatch({type: 'add', data: text})
}
}
return <input type="text"
onChange={e => setText(e.target.value) }
onKeyDown={onKeyDown}
value={text}/>
}
// todoList.js
import { useState, useContext } from "react";
import {Context} from '../hoc/contextHoc';
import React from 'react';
export default () => {
const [current, setCurrent] = useState('');
const store = useContext(Context);
const [state, dispatch] = store.todo;
return (<>
<span>当前选择的是： {current}</span>
<ul>
{state.map((l, idx) => <li onClick={() => setCurrent(l)} key={idx}>{l}</li>)}
</ul>
</>)
}
至此 我们就实现了简易版的redux
