[React组件化]函数式组件中使用React Hooks实现简

如题，使用react hooks实现使用redux的效果，主要用到的钩子就是 useReducer， useContext

主要解决的问题：

1. 函数式组件注入共享状态
2. 使用react hooks实现简易版redux
3. 多个reducer结合使用
4. 抽离状态的组件化

首先来简单介绍一下 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