Создание класса редуктора для ReactJS + Redux - PullRequest
0 голосов
/ 17 марта 2020

Я пытаюсь уменьшить объем кода, который я использую для редукторов и действий в приложении ReactJS -Redux, и у меня возникают проблемы с выяснением, почему данные, загруженные в действие чтения, заполняют ОБА ключи-редукторы в store.

reducer.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);
        }
    }
}

action. 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))
        };
    }    
}

store. 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 and Action? Большинство (если не все) из моих операций будут делать то же самое, и я пытаюсь уменьшить количество повторений кода. Спасибо за любую помощь.

1 Ответ

1 голос
/ 17 марта 2020

Я бы сказал, что проблема в том, что оба экземпляра ActionClass генерируют один и тот же тип действия (_READ), и оба редуктора слушают этот тип действий. Вам необходимо предоставить аргумент как создателю вашего действия, так и создателю редуктора (вы уже делаете это с вашим создателем действия: имя таблицы), который вы используете для создания типов действий, которые задаются c.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...