相关疑难解决方法(0)

我正在使用Redux进行状态管理.
如何将商店重置为初始状态？

例如,假设我有两个用户帐户(u1和u2).
想象一下以下一系列事件:

1. 用户u1登录应用程序并执行某些操作,因此我们会在商店中缓存一些数据.

2. 用户u1注销.

3. 用户u2无需刷新浏览器即可登录应用程序.

此时,缓存的数据将与之关联u1,我想将其清理干净.

当第一个用户注销时,如何将Redux存储重置为其初始状态？

我已经看到注销后清除/重置商店的解决方案，但不明白如何为以下设置 redux 商店的方式实现相同的功能。

商店.js：

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import authReducer from './ducks/authentication'
import snackbar from './ducks/snackbar'
import sidebar from './ducks/sidebar'
import global from './ducks/global'
import quickView from './ducks/quickView'
import profileView from './ducks/profileView'

const store = configureStore({
  reducer: {
    auth: authReducer,
    snackbar,
    sidebar,
    global,
    quickView,
    profileView,
  },
  middleware: [...getDefaultMiddleware()],
})

export default store

以下是使用@reduxjs/toolkit 中的 createAction 和 createReducer 实现所有 reducer 的方法。

小吃店.js：

import { createAction, createReducer } from '@reduxjs/toolkit'

export const handleSnackbar = createAction('snackbar/handleSnackbar')

export const openSnackBar = …

我在我的反应项目中使用 redux-toolkit。在 createSlice 的 reducer 中，我想在减少最终状态之前使用状态中现有的实体数组并附加新数组。但我无法获得状态值。

这是减速器代码

export const usersSlice = createSlice({
  name: "users",
  initialState: initialUsersState,
  reducers: {
    usersCreated: (state: UsersState, action) => {
      // in real, return count from the server and append the entities on front-end only?
      const { count, entities } = action.payload;
      const existingEntities = state.entities;
      const newEntities = [...existingEntities, ...entities];
      const totalCount = state.totalCount+count;
      return {
        ...state,
        entities: newEntities,
        totalCount: totalCount,
        listLoading: false,
        error: null,
      };
    },
}});

当我调试 state.entites 变量时，它看起来像这样

有没有办法访问 reducer/extraReducer 中的当前状态值以根据需要重新创建状态？

因为我认为在 …

如何使用 redux 工具包在 React 中将由多个切片组成的存储状态替换为其他新状态？

您可以使用extraReducers将整个存储恢复到其初始状态：是否可以使用相同的机制将存储状态更改为初始状态以外的其他状态？

例如，你会有这样的东西：

const aSlice = createSlice({ 
  name: 'a', 
  initialState: {a: 1}, 
  reducers: {
    someReducer(state, action) {...}
  }
})
const bSlice = createSlice({ 
  name: 'b', 
  initialState: {b: 'foo'}, 
  reducers: {}
})

const store = configureStore({
  reducer: {
    aReducer: aSlice.reducer,
    bReducer: bSlice.reducer,
  }
});

export type RootState = ReturnType<typeof store.getState>

在 React 组件中，您可以使用以下方法更新状态：

const dispatch = useDispatch();
dispatch(someReducer({...}));

如何用这样的内容替换整个商店的状态：

{
  "aReducer": {"a": 2},
  "bReducer": {"b": "bar"},
}