Question

0

127

Views

How to transform a Redux state into Redux Persist using 'combineReducers'?

I try to transform my Redux state in Redux-Persist but I don't know how to write the code because I use combineReducers.

This is how looks my store:

import { createStore, combineReducers } from 'redux'
import { usersReducer } from './users';
import { eventsReducer } from './events';

export const store = createStore(combineReducers({
    users: usersReducer,
    events: eventsReducer
}));

And this is how looks a store:

const initialState = {
    loggedIn: false,
    thisUser: []
}

export function usersReducer(state = initialState, action) {
    switch (action.type) {
        case 'users/loggedIn':
            return { ...state, loggedIn: action.payload }
        case 'users/addUser':
            return { ...state, thisUser: action.payload[0] }
        case 'users/setActivated':
            return { ...state, thisUser: { ...state.thisUser, activated: action.payload } }
        case 'clearAll':
            return {
                thisUser: []
            }
        default:
            return state
    }
}

Can somebody help me, please?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T22:15:49.133Z

You can just make changes to your code in store.js.

Pre-requisite

Install @reduxjs/toolkit package

using npm: npm install @reduxjs/toolkit
using yarn: yarn add @reduxjs/toolkit

Install redux-persist package

using npm: npm install redux-persist
using yarn: yarn add redux-persist

Changes to be made in `store.js` file

1. Persist all reducers

import { combineReducers } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import { usersReducer } from './users';
import { eventsReducer } from './events';
import {
  FLUSH, PAUSE,
  PERSIST, persistReducer, PURGE,
  REGISTER, REHYDRATE
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// combine all reducers
const reducers = combineReducers({
  users: usersReducer,
  events: eventsReducer
})

export const store = configureStore({
  reducer: persistReducer(
    {
      key: 'root',
      storage
    },
    reducers
  ),
  middleware: getDefaultMiddleware => getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
    }
  })
})

3. Persist only certain reducer

import { combineReducers } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import { usersReducer } from './users';
import { eventsReducer } from './events';
import {
  FLUSH, PAUSE,
  PERSIST, persistReducer, PURGE,
  REGISTER, REHYDRATE
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// combine all reducers
const reducers = combineReducers({
  users: persistReducer(
    {
      key: 'users',
      storage
    },
    usersReducer
  ),
  events: eventsReducer
})

export const store = configureStore({
  reducer: reducers,
  middleware: getDefaultMiddleware => getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
    }
  })
})

Here are the references:

0

127