How to compute data using elements from different branch of state tree in Redux React Native?

Question

I'm new to React, React Native and Redux so I'm trying to wrap my head around alot of these news concepts for the past few days.

One problem I ran into right now is computing new data in Action Creator, before wrapping it around action object and passing into reducer, that requires a piece of data from other branch within the state tree. How would you normally go about solving this? Changing the structure of the global state tree or map this piece of data to the component requiring it?

Given the state tree:

{
    ListView:{
        dataSource : a ListView.DataSource type
    }
    SubmitForm:{
        title : 'name of title',
        text : 'description'
    }
    isFetchingData: true/false
}

And supposedly, each branch is handled by a different reducer, and each branch's data is passed into separate component as props.

Here's the scenario (I'm translating the React tutorial to React Native using Redux ):

1. Submit button is clicked in the SubmitForm
2. --> dispatch an action to notify store that data is being sent, then async grab and send {title,text} to API server.
3. Upon success ---> compute the dataSource returned from API server and pass the result dataSource to reducer (according to the tutorial). And by computing dataSource, I mean dataSource.cloneWithRows(....) (explained here), which requires the dataSource from ListView as seen above.

So my thought was the Form component should not have a prop called dataSource, as this is from another branch in the state tree. But without it, I'm not sure how to achieve the desired dataSource. Changing (merging ListView and SubmitForm in this case) the structure of the state tree would also be strange, as to my understanding about Redux pattern. So could someone help me figure this out? Thanks

Answer 1

Thanks guys. I think I found the best solution by using redux-thunk (well I was actually using redux-thunk to handle async action, but didnt read up the api well enough). Basically the thunk is also injected with getState, so basically calling getState() will gain me access to the global state tree and that should solve my problem.

const actionCreator = (args) => {
    return (dispatch,getState) => {
        // dispatch action to notify store that data is being sent
        fetch(url)
        .then((response) => response.json())
        .then((resData) => {
            // dispatch action to notify data received
            // compute new data using resData and current dataSource accessed by getState().ListView.dataSource
        })
    }    
}

Answer 2

I have thought this problem before and I think this may be a way.

For example. You have actionA,reducerA and branchA of store. You have actionB,reducerB and branchB of store.

Now you want to read branchA and branchB at the same time and change them.

Ok,let us define two actions.

One in actionA(sub-actionA), which to change the branchA. Another in actionB(sub-actionB), which to change the branchB.

And then, define a total action(total-action),which will call sub-actionA and sub-actionB in order.

The last problem is "How to read branchB in the sub-actionA".

ok, we can use the method 'getState' of store. We import the store into the actionA, and call store.getState() It will return the whole tree of store.

Answer 3

This is a common question, and conveniently has an answer over in the Redux FAQ.

Short version: combineReducers solves a simple use case of splitting reducer functionality by domain/slice-of-state. You've gone past that, and now need to either add custom additional top-level reducer logic to handle this action, or include the additional needed data in the action itself.