How to show a loading indicator in React Redux app while fetching the data?
<p>I'm new to React/Redux. I use a fetch api middleware in Redux app to process the APIs. It's (<a href="https://github.com/agraboso/redux-api-middleware" rel="noreferrer">redux-api-middleware</a>). I think it's the good way to process async api actions. But I find some cases which can't be resolve by myself.</p>

<p>As the homepage (<a href="https://github.com/agraboso/redux-api-middleware#lifecycle" rel="noreferrer">Lifecycle</a>) say, a fetch API lifecycle begins with dispatching a CALL_API action ends with dispatching a FSA action.</p>

<p>So my first case is showing/hiding a preloader when fetching APIs. The middleware will dispatch a FSA action at the beginning and dispatch a FSA action at the end. Both the actions are received by reducers which should be only doing some normal data processing. No UI operations, no more operations. Maybe I should save the processing status in state then render them when store updating.</p>

<p>But how to do this? A react component flow over the whole page? what happen with store updating from other actions? I mean they are more like events than state!</p>

<p>Even a worse case, what should I do when I have to use the native confirm dialog or alert dialog in redux/react apps? Where should they be put, actions or reducers?</p>

<p>Best wishes! Wish for replying.</p>