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?

What does `store.load()` in your actions do and where does that object come from? Also I can't find the line where you actually call `fetch()` to do the network request. Did you do the redux todo app tutorial? — trixn, Apr 17 '18 at 12:43
This is the extreact store, so I don't use fetch it is loading automatically by autoLoad:true, I tried with store.load() just to reinfornce the loading part is done... — Милош Рајковић, Apr 17 '18 at 12:44

score 1 · Answer 1 · answered Apr 17 '18 at 08:05

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.

answered Apr 17 '18 at 08:05

Waweru Mwaura

247
1
7

I know that, but I strictly want to load store from action. Any idea for that? – Милош Рајковић Apr 17 '18 at 08:08

trixn · Accepted Answer · 2018-04-18T14:27:40.950

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
}

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

2 Answers2