Skip to content

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, however, when I navigate to another page, redux loses it’s state and defaults to the initialState. Here is my code:


const BOOK_SELECT = "book/SELECT";

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

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

      return initialState;
  return state;

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

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


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

export default combineReducers({


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

export default createStore(reducer);


    <Provider store={store}>
      <Router history={browserHistory}>
          <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} />

  , 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);

    window.location = '/addMembers'

This is performed in a childComponent. I made a test button in it’s parent component that access 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:}))(AddMembers);

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


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.