redux get item from state or fetch from server

Question

I have a lot of confusion when it comes to the 'right' way to do things in the redux world. Lets say I have a reducer that holds list of foos, and that these foos can be fully loaded with all the information that the server has about a foo or just partially loaded.

In the app I have two views/states one where I have a list of foos and one where I view the details of a single foo.

When I view the details of a foo I want to go through a few stages to determine if/what data I need to fetch from the server. This decision process goes something like this:

1) I have navigated directly to the foo's details view. Theres nothing in the redux store about this foo and I want to go retrieve a full set of information about the foo from the server.

2) I previously hit the list view where I retrieve partial information about the foo, when I view the details view I want to only fetch the additional information I am lacking for that foo

3) I have previously seen the foo view of an item so the information I need is already in the redux store so no need to fetch anything else from the server

Now forgetting the fact that the data in the redux store will need refreshing if stale. I am confused about how I achieve these three things by conditionally dispatching actions. I basically want to dispatch actions to partially or fully retrieve the data and set the selected item to display.

When I am on the details view I can connect the foo from the store directly to the props IF I have all the info I require. If not I need to dispatch an action to either fully or partially retrieve additional data for my foo data. On the back of that action been complete and the reducer adding the fully complete foo to the list of foo's in my state I then want to find the appropriate one and assign that to props/state of the component.

While I understand the parts of this I need to achieve I don't know when and where I am supposed to do each part of this process.

For ease lets assume that every foo has an id so finding the foo in my state is a filter by that id.

Hope this makes sense, any help welcome and are there any common patterns for this "fetch from local state cache or fall back to server if missing" concept.

Chris

Answer 1

You can examine the current Redux state within an async action creator and then conditionally update the state. So, whenever you may need to update local state from the server, dispatch the action creator and let it handle the decision making. You might do this in componentDidMount. If you're using Redux Thunk, you can pass the current state in like this:

export default function fetchFooBar() {
    return (dispatch, getState) => {
        const state = getState();

        if (! state.foo.bar) {
            // fetch and dispatch
        }
    }
}