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

In My opinion, I think that when your DOM first loads, rather than displaying the items it first sets the state,

this.setState({ usershortcuts: this.props.usershortcuts });

Then on the second load since the items are on state, that is when they are loaded. If you can call the method of fetching your items in the ComponentDidMount instead of setting the state then your app will work fine.

Answer 2

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
}