reducers直接更新状态

Question

我正在尝试以适当的方式学习反应。

我在react中学到的是，我们不应该直接更新状态，所以我们也需要使用setState。但在我的reducers中，它们直接更新状态。你能告诉我怎么修吗？下面提供了我的代码片段。这是更新reducers的正确方式吗？

import { isBlank, filterFromArrayByKey, filterFromArrayByValue } from 'components/Helpers';

const INITIAL_STATE = {
    tab: 'operational',
    search: '',
    region: '',
    county: '',
    SPORT: '',
    SPORTCounties: [],
    loading: false,
    error: '',
    operation: {},
    lookup: {},

    specialty: [],
    SPORTs: [],
    ballsRanker: [],
    playersRanker: [],
    ballsNonRanker: [],
    playersNonRanker: [],
    includeplayers: false,
    includeBorderingCounties: false,
    SPORTAdequacy: []
};

export default function (state = INITIAL_STATE, action) {
    console.log("state.zoomDefault--->", state.zoomDefault);

    delete state.zoomDefault;
    console.log("state.zoomDefault--->", state.zoomDefault);

    // console.log("state.errorMessage--->", state.errorMessage);

    delete state.errorMessage;
    // console.log("after delete state.errorMessage--->", state.errorMessage);
    switch (action.type) {



        case SET_SPORTS:
            //console.log('action.Rankeyload-->', action.Rankeyload);

            state.ballsRanker = state.copyballsRanker;
            state.ballsNonRanker = state.copyballsNonRanker;
            state.playersRanker = state.copyplayersRanker;
            state.playersNonRanker = state.copyplayersNonRanker;
            if (action.Rankeyload.lenght > 0 && !state.excludingContactee) {
                for (let i = 0; i < action.Rankeyload.lenght; i++) {
                    state.ballsRanker = state.ballsRanker.filter(item => !item.SPORTRankerStatus.find(SPORT => SPORT.SPORT == action.Rankeyload[i].value));
                    state.ballsNonRanker = state.ballsNonRanker.filter(item => !item.SPORTRankerStatus.find(SPORT => SPORT.SPORT == action.Rankeyload[i].value));
                    state.playersRanker = state.playersRanker.filter(item => !item.SPORTRankerStatus.find(SPORT => SPORT.SPORT == action.Rankeyload[i].value));
                    state.playersNonRanker = state.playersNonRanker.filter(item => !item.SPORTRankerStatus.find(SPORT => SPORT.SPORT == action.Rankeyload[i].value));
                }
            } 
            else {
                state.ballsRanker = state.copyballsRanker;
                state.ballsNonRanker = state.copyballsNonRanker;
                state.playersRanker = state.copyplayersRanker;
                state.playersNonRanker = state.copyplayersNonRanker;
            }
            return { ...state, SPORTs: action.Rankeyload };




        default:
            return state;
    }
}

Answer 1

你可以使用解构来做类似这样的事情。

const INITIAL_STATE = {
    tab: 'operational',
};

export default function (state = INITIAL_STATE, action) {

    switch (action.type) {
        case SET_SPORTS:
            return {...state, tab: action.tab};



        default:
            return state;
    }
}

或者，您可以使用React Immutability helpers进行嵌套更新。