Redux 在导航到另一个页面时丢失状态

Question

我正在使用 React 和 Redux 构建一个 Web 应用程序。当我在该页面上设置状态，然后通过像 this.props.book.bookTitle 这样的语句重新访问它时，Redux 可以工作，但是，当我导航到另一个页面时，redux 会丢失它的状态并默认为初始状态。这是我的代码：

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

在下面的代码中，我设置了状态，并导航到一个新窗口。

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.props.book 而无需导航到新页面，并且它可以很好地访问 redux 中的属性。但是一旦我使用window.location 导航到新页面，redux 值就会返回到它的初始状态：

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

像这样导出类时，我也在连接到商店：

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

有谁知道我做错了什么？感谢您的帮助。

Answer 1

页面重新加载后，Redux 状态不会保留。 window.location = '/addMembers' 导致页面重新加载，当您使用 react-router 时，这不是以编程方式导航到另一个页面的正确方法。而不是你应该使用this.props.history.push('/addMembers')。

阅读this question 的答案，了解如何以编程方式在 react-router 中导航。