将减速器名称传递到 Redux-persist 白名单不起作用

Question

我想让用户数据在页面刷新时保持不变。但是当我成功登录并检查浏览器开发人员工具的

Storage

选项卡中的

Application

时，它是空的。我已激活

PersistGate

的调试，但它没有显示任何内容。我已经像这样配置了我的 Redux 存储：

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["user", "taskForm"], //here I have added the reducers
};

const persistedUserReducer = persistReducer(persistConfig, userReducer);

export const store = configureStore({
  reducer: {
    user: persistedUserReducer,
    taskForm: taskFormReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

在这里，我用

PersistGate

包装应用程序：

root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor} debug={true}>
        <ThemeProvider theme={theme}>
          <BrowserRouter>
            <I18nextProvider i18n={i18n}>
              <App />
            </I18nextProvider>
          </BrowserRouter>
        </ThemeProvider>
    </PersistGate>
  </Provider>
);

我的调度显然正在工作，因为我可以看到

"Stored in Redux: ", userData

日志。

try {
   dispatch(
      setUser({
          userData: userData,
          token: tokenResponse.data.access_token,
             })
           );
   console.log("Stored in Redux: ", userData);
} catch (dispatchError) {
   console.error("Error dispatching to Redux:", dispatchError);
   }

Answer 1

我知道问题是什么了。

const rootReducer = combineReducers({ //I had to use this combiner
  user: userReducer,
  taskForm: taskFormReducer,
});

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["user", "taskForm"], //here I have added the reducers
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer //I should have passed the combined persisted reducer
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);