Redux loses state when navigating to another page

I am building a web application using React and Redux. Redux works when I set the state on that page and then reaccess it through a statement like this.props.book.bookTitle, however, when I navigate to another page, redux loses it’s state and defaults to the initialState. Here is my code:

bookDuck.js:

const BOOK_SELECT = "book/SELECT";
const BOOK_DESELECT = "book/DESELECT";

const initialState = {
  _id: "",
  bookTitle: "",
  bookCover: "",
  bookAuthors: [],
  bookDescription: ""
};

export default function reducer(state = initialState, action) {
  switch(action.type) {
    case BOOK_SELECT:
      return Object.assign({}, action.book);

    case BOOK_DESELECT:
      return initialState;
  }
  return state;
}

export function selectBook(book) {
  console.log(book);
  return {type: BOOK_SELECT, book};
}

export function deselectBook() {
  return {type: BOOK_DESELECT};
}

reducer.js:

import { combineReducers } from 'redux';
import user from './ducks/userDuck';
import book from './ducks/bookDuck';

export default combineReducers({
  user,
  book
});

store.js:

import { createStore } from 'redux';
import reducer from './reducer';

export default createStore(reducer);

index.js:

ReactDOM.render(
  <center>
    <Provider store={store}>
      <Router history={browserHistory}>
        <div>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
          <Route path="/createAccount" component={CreateAccount} />
          <Route path="/createBookGroup" component={CreateBookGroup} />
          <Route path="/addMembers" component={AddMembers} />
        </div>
      </Router>
    </Provider>


  </center>
  , document.getElementById('root'));

In the following piece of code, I set the state, and navigate to a new window.

createBookGroup() {
    let groupToCreateInfo = {
      bookTitle: this.props.bookTitle,
      bookCover: this.props.bookCover,
      bookAuthors: this.props.bookAuthors,
      bookDescription: this.props.bookDescription
    }

    console.log("Create book group is " + groupToCreateInfo.bookTitle);

    store.dispatch(selectBook(groupToCreateInfo));
    window.location = '/addMembers'
  }

This is performed in a childComponent. I made a test button in it’s parent component that access this.props.book from the store without navigating to a new page, and it accesses the properties in redux just fine. But as soon as I navigate to a new page using window.location, the redux value returns to it’s initial state of:

const initialState = {
  _id: "",
  bookTitle: "",
  bookCover: "",
  bookAuthors: [],
  bookDescription: ""
};

I am also connecting to the store when exporting the class like this:

export default connect(state => ({book: state.book}))(AddMembers);

Does anyone know what I could be doing wrong? I appreciate the help.

Answer

Redux state doesn’t remain after a page reload. window.location = '/addMembers' cause a page reload and it’s not the correct way to programmatically navigate to another page when you use react-router. Instead of that you should use this.props.history.push('/addMembers').

Read answers to this question to get an idea about how to programmatically navigate in react-router.

Advertisement

Answer