设置：
- @page1 加载项目列表
- @page1 我有一个链接到@page2
- @page2 通过 redux store/connect 有来自 @page1 的项目的下拉列表
作品路线> @page1 -> @page2
如果流程转到@page1 -> @page2，它可以正常工作，因为它确保项目被预加载。
问题如何成为路线 - > @page2
但是当它直接转到 @page2 时处理项目的最佳方法是什么，我应该以某种方式检测路由来源并再次加载项目 @page2 吗？
页面路由之间的 redux 存储状态
IT技术
reactjs
redux
react-router
2021-05-26 10:53:48
2个回答
如何填充第 1 页中的项目？
如果我正确理解您的问题，您无需担心如何处理这些项目，因为它们存储在您的 Redux 存储中。
当您执行 a 时，mapStateToProps您可以定义希望从商店中获得哪些数据可用于页面 2 组件。
有很多方法可以做到这一点，这个例子展示了如何使用Component和Actions
您可以像这样设置减速器
const app_default_data = {
items: [],
loaded: false,
}
function appReducer(app=app_default_data, action) {
// your ap preducer code here.
return app;
}
export default appReducer;
您的操作可能如下所示
// your loadAppData action will load data from server
const loadAppData = () => {
// load the data from server
// validate it
// save data in your store.
// change loaded to true in your store
return { type: APP_DATA_LOADED, payload: data }
}
现在，在依赖数据存在的每个组件中，您可以执行以下操作
const mapStateToProps = ( state, ownProps ) => {
return {
items: state.app.items,
loaded: state.app.loaded,
}
}
const mapDispatchToProps = ( dispatch, ownProps ) => {
return {
loadAppData: () => dispatch( loadAppData() ),
}
}
let MyComponent = (props) => {
if ( ! props.loaded ) {
setTimeout( () => {
props.loadAppData();
}, 10);
}
if ( props.loaded ) {
return (
<h1>Data is loaded.</h1>
)
} else {
return (
<h1>Loading data, please wait...</h1>
)
}
}
注意：我在这里以无状态组件为例，如果数据未加载，我使用setTimeout调用Actionif 数据。
如果您正在使用，React Class您可以放置props.loadAppData();在您的componentDidMount方法中，它会起作用。