Question

设置：

@ page1加载项目列表

@ page1我有一个链接到@ page2

@ page2的下拉列表包含@ page1中的项目，通过redux store / connect

工作路线＆gt; @ page1 - ＆gt; @ 2页

如果流程转到@ page1 - ＆gt;它可以正常工作@ page2因为它可以确保预装项目。

质疑如何路线 - ＆gt; @ 2页

但是当它直接进入@ page2时处理项目的最佳方法是什么，我应该以某种方式检测路由来源并再次加载项目@ page2？

Answer 1

第1页的项目是如何填充的？

如果我正确理解您的问题，您不必担心如何处理这些项目，因为它们存储在您的redux商店中。

当您执行mapStateToProps时，您可以定义您希望第2页组件可用的商店中的数据。

Answer 2

有很多方法可以执行此操作，此示例展示了如何使用Component和Actions

实现此目的

您可以像这样设置 reducer

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来调用Action。

如果您使用的是React Class，则可以在props.loadAppData();方法中放置componentDidMount，这样就可以了。

页面路由之间的redux存储状态

2 个答案: