Redux

Question

重置 redux 存储的子树的正确方法是什么？我对重置整个 redux 存储不感兴趣，而只是重置它的 reducer 子树部分。

这是一个示例片段：

//initial state
const initialState = {
    isFetching: false,
    error: '',
    page: 0
}

//reducer for suggestions store
export default function suggestions (state = initialState, action) {
    switch (action.type) {
        case FETCHING_SUGGESTIONS : {
            return {
                ...state,
                isFetching: true
            }
        }
        case FETCHING_SUGGESTIONS_SUCCESS : {
            return {
                ...state,
                [action.suggestion.suggestionId] : action.suggestion
            }
        }
        case FETCHING_SUGGESTIONS_ERROR : {
            return {
                ...state,
                isFetching: false,
                error: "Error in fetching suggestions"
            }
        }
        case CHANGE_PAGE : {
            return {
                ...state,
                page: action.page
            }
        }
        case ADD_SUGGESTION : {
            return {
                ...state,
                [action.suggestion.suggestionId]: action.suggestion
            }
        }
        case CLEAR_SUGGESTIONS : {
            return {
                initialState
            }
        }
        default : 
            return state
    }
}

我认为这可行，但是每当调度 CLEAR_SUGGESTIONS 操作时，我的某些组件突然出现未定义的道具和以下错误： warning.js:36 警告：performUpdateIfNecessary：意外的批号（当前 161，待定 157）

我不是 100% 确信我这样做是正确的。有人可以确认问题是出在我的减速器上，还是出在我的组件生命周期方法中的某个地方吗？

谢谢！

Answer 1

您创建的对象将如下所示：

{
  initialState: {
    isFetching: false,
    error: '',
    page: 0
  }
}

你要的是这个：

case CLEAR_SUGGESTIONS : {
  return {
    ...initialState
  }
}

Answer 2

您不小心将 initialState 嵌套在名为“initialState”的键下。你只想要：

case CLEAR_SUGGESTIONS : {
  return initialState
}

无需复制 initialState，因为存储状态是不可变的。

Redux - 重置子树的状态

Redux - Reset state of subtree

javascript

reactjs

react-redux