javascript - 使用 Redux 在 ExtReact 中首次渲染之前无法从存储加载数据；

Question

在第一次渲染之前，我有想要向其传递数据的组件。但我总是先得到一个空数组，然后在初始渲染后得到数据。我正在使用 Redux actions 和Reducers 通过mapStateToProps 传递数据。

[此问题已解决]:

How to wait until all of the properties of received synchronous array are set in React-Redux?

Answer 1

您的ShortcutComponent是无状态的。它需要渲染的数据完全来自外部作为 props。将整个菜单包装到一个按钮中也很奇怪:

const ShortcutComponent = ({usershortcuts}) => (
    <Menu title="Shortcuts">
        {usershortcuts.map((item) => {
            <MenuItem iconCls={item.shortcutDefinition.iconCls} text={item.shortcutDefinition.description} />
        })}
    </Menu>
);

const mapStateToProps = ({usershortcuts}) => ({
    usershortcuts
});

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(usershortcutAction, dispatch)
});

export connect(mapStateToProps, mapDispatchToProps)(ShortcutComponent);

通过Store加载也是异步的。您必须在加载完成后发送加载成功消息。它必须看起来类似于:

export usershortcutFetchDataThroughStore = dispatch => {
   userShortcutStore.on('load', (records, success) => {
       if (success) return dispatch(usershortcutFetchDataThroughStoreSuccess(records));

       return dispatch(usershortcutsFetchFailed()); // indicates an error when fetching
   };

   store.load();
   dispatch(usershortcutsLoading()); // this action should set a variable that indicates loading so it can be rendered accordingly
}