为 ReactJS + Redux 创建一个 Reducer 类

Question

我正在尝试减少用于 ReactJS-Redux 应用程序中的减速器和操作的代码量，但我在弄清楚为什么读取操作中加载的数据填充商店中的两个减速器键时遇到了一些麻烦。

减速器.js;

export class ReducerClass{
    constructor(){
        this.initialState = {data:[],record:{},loading:false,editmode:0};
    }    
    reducer = (state = this.initialState,action) =>{
        let newState = {...state};
        switch(action.type){
            case "_READ":
                newState.data = action.value;
                newState.loading = false;                     
                return(newState);                
            default:
                return(newState);
        }
    }
}

动作.js：

export class ActionClass{
    constructor(tablename){
        this.tablename = tablename;        
    }
    actionRead = (params) => (dispatch) => {        
        let query = params ? toQueryString(params) : "";
        let url = this.tablename + (query ? "?" + query : "");
        dbFetch(url, (data) => dispatch({ type: "_READ", value: data }));
    }
    mapStateToProps = (state) => {
        let dataTable = state[this.tablename];
        return { data: dataTable.data, record: dataTable.record, loading: dataTable.loading, editmode: dataTable.editmode };
    }
    mapDispatchToProps = (dispatch) => {
        return {
            read: (params) => dispatch(this.actionRead(params))
        };
    }    
}

商店.js：

import { ReducerClass } from './reducer.js';
let cusdata = new ReducerClass();
let emldata = new ReducerClass();
let rootReducer = combineReducers({
     cusdata: cusdata.reducer,
     emldata: cusdata.reducer
});
export const Store = createStore(rootReducer, applyMiddleware(thunk));

显然我没有包括所有的导入，因为它们中的大多数都是隐式的。 在（可以说）网格组件中声明连接器：

cusDataGridConnect = new ActionClass("cusdata");
export default connect(cusDataGridConnect.mapStateToProps, cusDataGridConnect.mapDispatchToProps)(CusDataGrid);

而对于其他网格组件：

const emlDataGridConnect = new ActionClass("emldata")
export default connect(emlDataGridConnect.mapStateToProps, emlDataGridConnect.mapDispatchToProps)(EmlDataGrid);

我遇到的问题是，当我对 cusdata 网格执行读取时，数据会填充到两个存储键中（为 cusdata 和 emldata 填充）。 有没有人可以帮助创建 Reducer 和 Action 类型类？ 我的大部分（如果不是全部）操作都会做完全相同的事情，我正在尝试减少代码重复。 谢谢你的帮助。

Answer 1

我想说的问题是两个 ActionClass 实例都生成相同类型的动作 (_READ)，并且两个 reducer 都侦听这种类型的动作。 您需要为您的操作和减速器创建者（您已经使用您的操作创建者：表名）提供一个参数，用于构建特定的操作类型。