Блог

Я использую redux, сохраняемый в моем веб-приложении, для хранения данных в локальном хранилище, но redux теряет данные при перезагрузке страницы. у кого-нибудь есть такая же проблема или кто-нибудь может мне в этом помочь.

моя инициализация redux-persist-это:

 import { createStore } from "redux";
import userData from "./reducers/reducers";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["userData"],
};

const persistedReducer = persistReducer(persistConfig, userData);

const store = createStore(persistedReducer);

export const persistor = persistStore(store);

export default store;

 

в то время как мой index.js:

 import React from "react";
import ReactDOM from "react-dom";
import "./index.scss";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/lib/integration/react";
import { persistor } from "./redux/store";
import store from "./redux/store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

 

Я не могу найти ни одной ошибки или плохой практики, может ли кто-нибудь мне помочь.

Redux-persist справится со всем этим. переделать-сохраниться

Пример :

configureStore.js

     import { createStore } from 'redux'
    import { persistStore, persistReducer } from 'redux-persist'
    import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
    import rootReducer from './reducers'
    
    const persistConfig = {
      key: 'root',
      storage,
    }
    
    const persistedReducer = persistReducer(persistConfig, rootReducer)
    
    export default () => {
      let store = createStore(persistedReducer)
      let persistor = persistStore(store)
      return { store, persistor }
    }
 

App.js

 import { PersistGate } from 'redux-persist/integration/react'

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};
 

Я не вижу ничего плохого с кодом, с той лишь разницей, что вас нет rootReducer , и вам не нужно ставить whitelist , так как когда я раньше whitelist это не фильтр и другие, по крайней мере, это не работает для меня, что не о том, что редуктор должен/не должен был, используя хранения blackList и передачи редукторов, что не работает.

Попробуйте попробовать создать рутрЕдуктор.