Redux 在导航到另一个页面时丢失状态 [英] Redux loses state when navigating to another page

问题描述

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

bookDuck.js:

const BOOK_SELECT = "book/SELECT";const BOOK_DESELECT = "书/DESELECT";常量初始状态 = {_ID: ""，书名: ""，封面: ""，书籍作者:[],书名:《》};导出默认函数reducer(state = initialState, action) {开关(动作.类型){案例 BOOK_SELECT:返回 Object.assign({}, action.book);案例 BOOK_DESELECT:返回初始状态；}返回状态；}导出函数 selectBook(book) {控制台日志(书)；返回{类型:BOOK_SELECT，书}；}导出函数 deselectBook() {返回{类型:BOOK_DESELECT}；}

reducer.js:

import { combineReducers } from 'redux';从'./ducks/userDuck'导入用户；从 './ducks/bookDuck' 导入书；导出默认的 combineReducers({用户，书});

store.js:

import { createStore } from 'redux';从'./reducer'导入reducer；导出默认 createStore(reducer);

index.js:

ReactDOM.render(<中心><提供者商店={商店}><路由器历史={browserHistory}><div><路由精确路径="/" 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'));

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

createBookGroup() {让 groupToCreateInfo = {bookTitle: this.props.bookTitle,bookCover: this.props.bookCover,bookAuthors: this.props.bookAuthors,bookDescription: this.props.bookDescription}console.log("创建书组是" + groupToCreateInfo.bookTitle);store.dispatch(selectBook(groupToCreateInfo));window.location = '/addMembers'}

这是在 childComponent 中执行的.我在它的父组件中创建了一个测试按钮，可以从商店访问 this.props.book 而不导航到新页面，并且它可以很好地访问 redux 中的属性.但是一旦我使用 window.location 导航到一个新页面，redux 值就会返回到它的初始状态:

const initialState = {_ID: ""，书名: ""，封面: ""，书籍作者:[],书名:《》};

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

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

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

解决方案

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

阅读这个问题的答案，了解如何以编程方式导航反应路由器.

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.

解决方案

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.

这篇关于Redux 在导航到另一个页面时丢失状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！