2

我对 react 和 redux 很陌生，我遇到了问题。

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

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

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

Dashboard 的渲染方法很简单：

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但我想这不是问题。

4

0 回答 0