首页 > 解决方案 > 在 redux reducer 与中间件中过滤状态数组

问题描述

我有一个请求,我想在带有条件的状态的某些元素之后插入新的数组,我应该在请求之后通过 select 获取状态或直接在 reducer 中将过滤放在 saga 中的位置:

function* getNewArr(action){
    const state yield select(getArrState);

    const response = fetch(...);
    ....
    const newArr = yield response.json();

    const index = state.arr.findIndex(el => last.updatedAt >= el.updatedAt);
    const arr = [...state.arr.slice(0, index), ...newArr, ...state.arr.slice(index)]
    
    //or delete from new arr if it is present in state
    
    newArr.fliter(el => {
        if(!state.arr.find(stateEl => stateEl.id == el.id){
            return el
        }          
    }) 

    dispatch(setArr(), arr)
}

和减速机:

const reducer = createReducer({
    name: 'arrState',
    inititalState,
    reducer: {
        setArr: (state, {payload}) => {
            state.arr = payload
        }
    }
}
export getArrState = state = state.arrState;
export {setArr} = reducer.actions;

或者在减速器中进行过滤:

setArr: (state, {payload: newArr}) => {
    const index = state.arr.findIndex(el => last.updatedAt >= el.updatedAt);
    state.arr = [...state.arr.slice(0, index), ...newArr, ...state.arr.slice(index)]

    // or case filter if present

    const arr = newArr.fliter(el => {
        if(!state.arr.find(stateEl => stateEl.id == el.id){
            return el;
        }          
    }) 
    state.arr = [...arr, ...state.arr];
}

标签: reactjsreduxredux-saga

解决方案


推荐阅读