Search code examples
reactjsasynchronousreact-reduxredux-thunk

Asynchronous in data redux components


I'm new in reactjs. I'm creating a movie web with redux thunk. At home container, I use axios to call API to get a list of movie data and save it in store.

My home container has a carousel component gets that data on store by useSelector and loop it to render many carousel items. The problem is here. The initial data state in store is null, and while my app call API, carousel component still maps it and get error there: TypeError: Cannot read property 'map' of null

I have solved this with ? syntax: data?.map()... and don't get that error. I wonder may we have any solution better than mine? I mean it can waiting until the fetch data success instead of using ?. in any component.

Thank you if anyone help me some solution. You can just give me some key word or library, which is used in real project. I will study to import myselt. Thank you


Solution

  • use empty array instead of null, as initial state of movie store is empty.