合并多个useReducer

多个useReducer的合并方法

1. 首先创建一个store文件，在store文件下创建存放仓库state状态文件夹和存放reducer方法的文件夹
2. 将存放store和reducer的文件进行一个合并
   这里我将多个state和多个reducer分成多个文件方式进行合并

import {useReducer} from 'react';
import {Contex} from './context';
import combineReducers from './combineReducers';
//通过require.context获取某个模块下的所有文件
/**
 * 第一个参数为所访问的模块目录，以当前文件为基准 
 * 第二个参数 是否读取模块下的自文件 
 * 第三个参数 所要读取文件后缀
 */
const reduceModule = require.context('./reduce',false,/\.js$/);
const stateModule = require.context('./state',false,/\.js$/);

//合并后的reduce
let multipleReduce = mergeModuls(reduceModule,'reduce');
let multipleState = mergeModuls(stateModule,'state');
/**
 * 将多个模块的某个属性合为一个对象
 * @param {读取到的模块} module 如上 ：reduceModule、stateModule
 * @param {模块中的属性} throwOut  例： state、 reduce
 */
function mergeModuls (modules,throwOut) {
    let multiple= {};
    modules.keys().forEach((key)=>{
        let module = modules(key).default;
        multiple[module.name] = module[throwOut]
    });
    return multiple
};

// 再将多个reduce通过combineReducers方法合并
const reduce = combineReducers(multipleReduce);
const Store = props =>{
    const [state, dispatch] = useReducer(reduce,multipleState);
return <Contex.Provider value={{state,dispatch}}>
        {props.children}
</Contex.Provider>
}
export default Store;

这是上面引入的combineReducers方法

export default reducers => {

    return (state={},action) => {
        let newReduce = {};
        //包含所有reducers函数名的数组 然后forEach遍历所有的key
        Object.keys(reducers).forEach(key =>{
            const childState = state[key];//状态就是总state得其中的一个子state
            newReduce[key] = reducers[key](childState,action);//然后得到新的子状态，赋值给对应的key的新state里面
        });
        return newReduce;//最后返回新的总state对象
    }
}

案例详细地址：https://github.com/Lzqsv/useReducer-dom