Unable to load data from the store before the first render in ExtReact using Redux;

Question

I have the component to which I want to pass data, before the first rendering. But I am always getting an empty array first, and then data aftwer the initial rendering. I am using Redux actions and Reducers to pass the data, through mapStateToProps.

[THIS IS SOLVED HERE]:

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

Answer 1

Your ShortcutComponent is stateless. The data it needs to render entirely come from outside as props. Also it is strange to wrap an entire menu into a button:

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);

Also loading through the Store is async. You have to dispatch loading success after loading has finished. It has to look similar to this:

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
}