使用 redux-toolkit 将状态重置为初始状态

Question

我需要将当前状态重置为初始状态。但我所有的尝试都没有成功。我该如何使用 redux-toolkit 来实现？

const showOnReviewSlice = createSlice({
  name: 'showOnReview',
  initialState: {
    returned: [],
  },
  reducers: {
    reset(state) {
      //here I need to reset state of current slice
    },
  },
});

Answer 1

像这样：

const intialState = {
  returned: []
}

const showOnReviewSlice = createSlice({
    name: 'showOnReview',
    initialState,
    reducers: {
        reset: () => initialState
    }
});

Answer 2

直接用 initialState 替换 state 对我来说没有工作（2020 年年中）。我最终得到的工作是用 Object.assign() 复制每个属性。这有效：

const showOnReviewSlice = createSlice({
    name: 'showOnReview',
    initialState: {
        returned: []
    },
    reducers: {
        reset(state) {
            Object.assign(state, initialState)
        }
    }
});

Answer 3

这对我有用（mid-late 2020）。以您的代码上下文为例进行格式化。

const initialState = {
  returned: [],
};

const showOnReviewSlice = createSlice({
  name: 'showOnReview',
  initialState,
  reducers: {
    reset: () => initialState,
  },
});

Answer 4

就我而言，正如之前的回答，2021 年年中，只需设置初始状态 不工作， 即使您使用像这样的工具包适配器：

reducers: {
        // Other reducers
         state = tasksAdapter.getInitialState({
                status: 'idle',
                error: null,
                current: null
            })
        }
    },

相反，你应该使用Object.assign()，猜测这与内部 immer 库行为有关

Answer 5

您可以对 initialState

使用扩展运算符

const initialState: {
  returned: unknown[] //set your type here
} = {
  returned: []
}

const showOnReviewSlice = createSlice({
  name: 'showOnReview',
  initialState,
  reducers: {
    reset() {
      return {
        ...initialState
      }
    }
  }
});

Answer 6

@i9 或者我有一个类似的问题，但是对于组合切片，我希望能够在调用日志时将状态重置为默认值

将减速器与 reduxtoolkit-query

结合使用的代码

// combining the reducers
const reducers = combineReducers({
  // regular-state
  themeMode: themeSlice.reducer,
  user: userSlice.reducer,
  onboarding: onboardingSlice.reducer,
  setupWizard: setupWizardSlice.reducer,
  // end regular-state
  //start rtk-query
  [supplyMgtApi.reducerPath]: supplyMgtApi.reducer,
  [vendorApi.reducerPath]: vendorApi.reducer,
  [warehouseApi.reducerPath]: warehouseApi.reducer,
  [inventoryApi.reducerPath]: inventoryApi.reducer,
  [commonsApi.reducerPath]: commonsApi.reducer,
  [productApi.reducerPath]: productApi.reducer,
  [employeeApi.reducerPath]: employeeApi.reducer,
  [payGroupApi.reducerPath]: payGroupApi.reducer,
  [rolesApi.reducerPath]: rolesApi.reducer,
  [taxationApi.reducerPath]: taxationApi.reducer,
  //end rtk-query
});

使用 redux-toolkit 将状态重置为初始状态

Reset state to initial with redux-toolkit

javascript

redux

redux-toolkit