Specific Object Save in Reducer in React Redux

Question

I'm trying to save the reducer auth when i login. My problem is not all values in auth i want to save when i login, i only want to save infos and token.

Pls check my code below authReducer

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case authConstants.LOGIN_REQUEST:
      return {
        ...state,
        token: null,
        infos: null,
        isLoggedIn: false,
        errors: null,
        isLoading: true,
      };
    case authConstants.LOGIN_SUCCESS:
      return {
        ...state,
        token: action.payload.token,
        infos: action.payload.user[0],
        isLoggedIn: true,
        errors: null,
        isLoading: false,
      };
    case authConstants.LOGIN_FAILED:
      return {
        ...state,
        token: null,
        infos: null,
        isLoggedIn: false,
        errors: null,
        isLoading: false,
      };
    case authConstants.LOGOUT:
      return {
        ...state,
        token: null,
        infos: null,
        isLoggedIn: false,
        errors: null,
        isLoading: false,
      };
    default:
      return state;
  }
};
export default authReducer;

index

import auth from './authReducer';
import { combineReducers } from 'redux';
import user from './userReducer';

const combinedReducer = combineReducers({
  auth,
  user,
});

const rootReducer = (state, action) => {
  if (action.type === 'Auth/LOGOUT') {
    state = undefined;
  }

  return combinedReducer(state, action);
};

export default rootReducer;

store.js

 // Redux
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// Redux Dev Tools
import { composeWithDevTools } from 'redux-devtools-extension';

// Redux Persist
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'auth',
  storage: storage,
  whitelist: ['auth.infos', 'auth.token'], // which reducer want to store
};

const pReducer = persistReducer(persistConfig, rootReducer);
const middleware = [thunk];
const store = createStore(pReducer, composeWithDevTools(applyMiddleware(...middleware)));
const persistor = persistStore(store);
export { persistor, store };

can you please provide more details.

Paveloosha
– Paveloosha

2020-10-07 03:26:09 +00:00
Commented Oct 7, 2020 at 3:26 — Paveloosha
– Paveloosha, Commented Oct 7, 2020 at 3:26
@Paveloosha. Just added it

Joseph
– Joseph

2020-10-07 03:29:29 +00:00
Commented Oct 7, 2020 at 3:29 — Joseph
– Joseph, Commented Oct 7, 2020 at 3:29

Sahil Raj Thapa · Accepted Answer · 2020-10-07 04:34:19Z

1

First create a function that will help to persist/whitelist some part of the state. i.e.

import storage from "redux-persist/lib/storage";
import { persistReducer } from "redux-persist";

export default function persist(key, whitelist, reducer) {
  return persistReducer(
    {
      key,
      storage,
      whitelist
    },
    reducer
  );
}

After that you can use the function in the authReducer.

import persist from 'path/to/persist';

const authReducer = (state = initialState, action) => { 
  // other code 
}
 
export default persist('auth', ['infos', 'token'], authReducer);

And now you can remove persistConfig and persistReducer from store.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// Redux Dev Tools
import { composeWithDevTools } from 'redux-devtools-extension';

// Redux Persist
import { persistStore } from 'redux-persist';

const middleware = [thunk];
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middleware)));
const persistor = persistStore(store);
export { persistor, store };

Credit

edited Oct 7, 2020 at 4:34

answered Oct 7, 2020 at 3:49

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Joseph Over a year ago

It still doesn't save the token and infos :(

Joseph Over a year ago

Just added my index reducer. I don't know if could help

Sahil Raj Thapa Over a year ago

can you add how you used the persist function in authReducer

Sahil Raj Thapa Over a year ago

Did you rebuild your app ?

Joseph Over a year ago

Hi! yes. I just noticed, if i do this, it works export default persist('auth', ['token'], authReducer);

|

Collectives™ on Stack Overflow

Specific Object Save in Reducer in React Redux

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related