Question

我很反应和减少，我遇到了问题。

注意：我需要稍后描述的流程，因为我的应用程序有一个动态菜单，即“处理”＃34;在服务器上。

在Login屏幕后的我的应用程序中，我显示一个加载数据的Dashboard组件（以异步方式）：

class Dashboard extends Component {
    componentWillMount() {
        this.props.loadAllSystems();
    }
    ...

仪表板的渲染方法非常简单：

render() {
    return (
        <div>
            <LeftNavigation className={style['left-navigation']} />
        </div>
    );
}

现在，LeftNavigation组件的状态与react-redux连接：

const mapStateToProps = (state) => {
    return {
        systemsTypes: getSystemsTypes(state)
    }
};

在systemTypes完成加载并触发更新状态的操作之前，属性this.props.loadAllSystems();为空。

getSystemsTypes是用reselect编写的：

export const getSystems = state => state.systems.collection;

export const getSystemsTypes = createSelector(getSystems, (systems) => {
    if (systems.length > 0) {
        return Object.keys(systems[0].monitors);
    }
});

如您所见，为了解决这个问题，我在systems.length上添加了一个检查，以避免在Object.keys上出错。

通过这种方式，应用程序可以运行，但这是正确的还是我做错了什么？

我没有使用redux-thunk，我使用redux-saga，但我想这不是问题。

React-Redux：mapStateToProps与异步调用

0 个答案: