从函数内部访问redux存储导致非持久化状态RTK

bmp9r5qi 于 2023-08-05 发布在其他

关注(0)|答案(1)|浏览(82)

我的持久化状态工作正常，但在从函数访问store以使用预加载的状态参数进行一些测试后，它无法持久化。它在第一次渲染时重新水合，但没有访问或持久化到浏览器。我认为当状态更新时，没有什么会导致从存储中重新渲染，但如何解决呢？
贮藏

export default function setupStore (preloadedState?: PreloadedState<RootState>) {
  const store = configureStore({
    reducer: persistedReducer,
    preloadedState,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware => 
      getDefaultMiddleware({
        serializableCheck:  {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
        }
      }).concat(logger),
  })
  return store
}

export const persistor = persistStore(setupStore())

字符串
//root reducer

export const rootPersistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['dealerStoreReducer'],//soon later,
  stateReconciler: autoMergeLevel2 ,
  // version: 1,
}
  
export const dealerStorePersistConfig = {
  key: 'dealerStore',
  storage: storage,
  whitelist: ['cartItems','adminStore'],
  // version: 1,
  //blacklist: ['dealerStoreReducer'],//soon later,
  stateReconciler: autoMergeLevel2 ,
}

export type DealerStoreReducer = initialStatedealerStore & PersistPartial;

const rootReducer = combineReducers({
  labels: labelsReducer,
  dealers: dealersReducer,
  user: usersReducer,
  orders: ordersReducer,
  orderItems: orderItemsReducer,
  dealerStore: persistReducer<initialStatedealerStore, any>(dealerStorePersistConfig, dealerStoreReducer),
})

export type RootReducer = ReturnType<typeof rootReducer>;
export const persistedReducer = persistReducer<RootReducer >(rootPersistConfig, rootReducer) 

export default rootReducer

型
索引

root.render(
  <Provider store={setupStore()}>
    <BarsContextProvider>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </BarsContextProvider>,
  </Provider>,
);

型

redux

来源：https://stackoverflow.com/questions/76642956/accessing-redux-store-from-inside-a-function-caused-non-persisted-state-rtk

1条答案

按热度按时间

0aydgbwb1#

目前还不清楚您对任何特定的商店示例到底做了什么，但根据您所展示的代码，您已经示例化了 * 至少**两个不同的商店对象。一个是在创建persistor时，另一个是在向react-reduxProvider组件传递存储时。
store.js

export default function setupStore (preloadedState?: PreloadedState<RootState>) {
  const store = configureStore({
    reducer: persistedReducer,
    preloadedState,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware => 
      getDefaultMiddleware({
        serializableCheck:  {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
        }
      }).concat(logger),
  });
  return store;
}

export const persistor = persistStore(setupStore()); // <-- store instance #1

字符串
index.js

root.render(
  <Provider store={setupStore()}> // <-- store instance #2
    <BarsContextProvider>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </BarsContextProvider>,
  </Provider>,
);

型
要解决这个问题，您只需要示例化一个商店示例，以便在整个应用程序中使用。
您可以导出setupStore函数用于测试/etc，然后还可以导出示例化的store和persistor：
store.js

export default function setupStore (preloadedState?: PreloadedState<RootState>) {
  const store = configureStore({
    reducer: persistedReducer,
    preloadedState,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware => 
      getDefaultMiddleware({
        serializableCheck:  {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
        }
      }).concat(logger),
  });
  return store;
}

export const store = setupStore(); // <-- store instance

export const persistor = persistStore(store); // <-- store instance passed in

型
index.js

root.render(
  <Provider store={store}> // <-- same store instance
    <BarsContextProvider>
      <PersistGate loading={null} persistor={persistor}> // <-- also used here
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </BarsContextProvider>,
  </Provider>,
);

型
或者，您可以只导出setupStore实用程序，并在index.js文件中示例化存储和持久化器。
store.js

export default function setupStore (preloadedState?: PreloadedState<RootState>) {
  const store = configureStore({
    reducer: persistedReducer,
    preloadedState,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware => 
      getDefaultMiddleware({
        serializableCheck:  {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
        }
      }).concat(logger),
  });
  return store;
}

型
index.js

const store = setupStore(); // <-- instantiate store
const persistor = persistStore(store); // <-- pass store instance

root.render(
  <Provider store={store}> // <-- same store instance
    <BarsContextProvider>
      <PersistGate loading={null} persistor={persistor}> // <-- also used here
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </BarsContextProvider>,
  </Provider>,
);

型

赞(0）回复(0）举报 2023-08-05

我来回答

从函数内部访问redux存储导致非持久化状态RTK

1条答案

相关问题

热门标签

最新问答