本文介绍了Redux 在导航到另一个页面时丢失状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 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 在导航到另一个页面时丢失状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!