-1

365体育足球滚球比分Hey guys i was using redux thunk with nextjs and now i want to add redux-persist in my app. So initially my code is like

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';

export const makeStore = (initialState, options) => {
    return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunk)));
};

can anyone help me with only in the setup with redux persist now ? I have tried some solution but didnt worked out

2

If you really need to persist your redux state there are two options as far as I know: first you could use react-persist365体育足球滚球比分 as per your wish like this

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
    key: 'reducer',
    storage: storage,
    whitelist: ['reducer'] // or blacklist to exclude specific reducers
 };
const presistedReducer = persistReducer(persistConfig, reducer );
const store = createStore(presistedReducer, 
composeWithDevTools(applyMiddleware(thunk)));
const persistor = persistStore(store);
export { persistor, store };

and then in your component you do the following as instructed in their documentation

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

// ... normal setup, create store and persistor, import components etc.

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

or you could simply do the following without relying on a library

import {
  createStore, combineReducers, compose, applyMiddleware,
 } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';
function saveToLocalStorage(state) {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
}

function loadFromLocalStorage() {
const serializedState = localStorage.getItem('state');
if (serializedState === null) return undefined;
   return JSON.parse(serializedState);
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const presistedState = loadFromLocalStorage();
const store = createStore(
    reducer,
    presistedState,
    composeEnhancers(applyMiddleware(thunk)),
 );
store.subscribe(() => saveToLocalStorage(store.getState()));
export default store;
| improve this answer | |
  • so the state will be set to localstorage every time i call an action creater and reducer perform some mutation ? i mean if some inital state is stored and then after sometime i again update the state so that updated state would be again save to local ? – Ratnabh kumar rai Apr 1 at 3:23
  • yes, you get to persist the piece of state you desire in storage, you can pass your initial state as a default value for the state argument in your reducer function, and then after every change your state updates should be persisted. – Muhammad Emad Al-Din Apr 1 at 10:49
1

365体育足球滚球比分Here is the having simple but detailed steps to integrate & use the package in your existing app.

Usually, I follow the same structure that you have for the redux store. This integration always works for me. So I hope this will help you out too.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.