Redux - reset state

Question

I'm trying to implement a redux reset state action based off a suggestion from Dan Abramov here. I've setup my reducers and store like so:

Index.js:

import {applyMiddleware,createStore} from 'redux';
import combineReducers from './reducers/index';
import {wrapStore,alias} from 'react-chrome-redux';
import thunk from 'redux-thunk';
import aliases from './aliases/aliases';

const combineAppReducers = ( state, action ) => {
  if ( action.type === 'LOG_OUT' ) {
    state = undefined;
  }

  return combineReducers(state, action)
}

const middlewares = [alias(aliases), thunk];

const store = createStore(combineAppReducers,applyMiddleware(...middlewares));

wrapStore(store, {
  portName: 'example'
});

Reducers.js:

import {combineReducers} from 'redux';
import userAuthReducer from './userAuthReducer';
import manageTeamsReducer from './manageTeamsReducer';

function lastAction(state = null, action) {
  return action;
}

export default combineReducers({
  userAuthReducer,manageTeamsReducer,lastAction
});

It looks as though I have set everything up correctly but the app is not resetting the state, can anyone spot where i've gone wrong?

Here is another article on it which I more closely followed:

https://medium.com/@agungsantoso/how-to-reset-the-state-of-a-redux-store-7f9d85b190bc

Have you tried setting state to an empty object? Like `state = {}`? — lumio, Oct 16 '17 at 10:57
I don't think it would be the best way, but, you can revert your state to its first value dispatching: `@@INIT` action. — Hitmands, Oct 16 '17 at 10:59
unfortunately it's a chrome extension so it doesn't always spit out errors. Where should I set the state to an empty object? — red house 87, Oct 16 '17 at 11:00

score 0 · Accepted Answer · answered Oct 16 '17 at 11:55

It is work fine. You can check my snippet. Can you upload an error log?

function lastAction(state = null, action) {
  return action;
}

function counter(state = 0, action) {
  if ( action.type === 'INC' ) {
      return state+1;
  }
 
  return state;
}

const  combineAppReducers = Redux.combineReducers({
  lastAction,
  counter
});

const combineReducers = ( state, action ) => {
  if ( action.type === 'LOG_OUT' ) {
    state = undefined;
  }
  return combineAppReducers(state, action)
}

const store = Redux.createStore(combineReducers);

const root = document.createElement('ul');
document.body.append(root);
let unsubscribe = store.subscribe(() =>{
  const li = document.createElement('li');
  li.append(store.getState().counter);
  root.append(li);
})

store.dispatch({type: 'INC'});
store.dispatch({type: 'INC'});
store.dispatch({type: 'INC'});
store.dispatch({type: 'LOG_OUT'});
store.dispatch({type: 'INC'});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>
</head>
<body>
</body>
</html>

I got the code to compile (have edited above). My actions all work how they're supposed to with the new integration but the logout action still does not reset the state... — red house 87, Oct 16 '17 at 13:40

Redux - reset state

1 Answers1