How to render data from redux store while action and reducer called in the same time

问题

I have problem related to reducer and action. Expose that I have a Component is Posts to display all posts.

I create a Reducer to store all posts.
I make an action to call all posts from API
A component will display data from store through action called inside component.

It means that reducer will be empty before action called.

Of course If I set condition to check reducer is empty or not, it is not bad solution.

But this is not really good if I need to show how many posts or sort posts action by author...

If search result return empty, the page also went.

Let see my reducer:

case ListPost:
  return({
    ...state, 
    postCount:payload.postCount,
    allPosts:payload.allPosts,
    postByAdmin:payload.postByAdmin,
    postByMod:payload.postByMod
  })

And Component

 useEffect(()=>{
   ListPostAction();
 },[]);
 if(ListPost.postCount > 0) {
   .....
   return (
     <div>
     ListPost.allPosts.map.....
    </div>
   )
 }else {
   return 'No post found' 
 }

The action will return payload from API like reducer above.

And by the first load, nothing return and action ListPost will continue run and it return post data to reducer. The state of Component will change and it will show data. No problem if it is just like that.

and problem is here:

You can see search box here. I make a search -> if it is no post, then reducer is also empty. Component will return empty. It means the bar All posts, post by admin, search box will be gone. Of course, I do not want to remove this bar when search result is empty.

Can you give me advice. Thanks

来源：https://stackoverflow.com/questions/59720114/how-to-render-data-from-redux-store-while-action-and-reducer-called-in-the-same

标签

javascript

reactjs

redux