How do i access state of one reducer in other in react redux. State flow between reducers and store

1
votes

I'm an absolute beginner in react-redux and I watched many videos and articles,docs and couldn't understand how the state flows between reducers and between store to reducer.

I am having state for each reducer like this

const initState = {todos:[]}

cont reducer = (state=initState,action) ....

Reducer 2 similarly with different state

initState2 = {todo:" "}

reducer2 = (state=initState2,action) ...

And then I import and combine the reducers. Here I am using two different reducers which have different states and is it the right way of doing things ? If so, How can redux be called single state if each reducer have its own individual state.

Don't we have a single state in the store which is accessed by all the reducers and dispatch actions to change state of store directly instead of changing the reducer's store. Any help is appreciated and it may seems like a silly question but filling the gaps is really important and many beginners have same doubt as mine and please do help. Thank you

2
javascriptreactjsreduxreact-redux

2 Answers

1
votes

How can redux be called single state if each reducer have its own individual state.

Because the state is not saved in the reducers. The state is only saved in the store and there is only one store. That is why is called single state.

To create the store:

const store = createStore(myBeautifulReducers)

In your case, myBeautifulReducers would be:

const myBeautifulReducers = combineReducers({reducer, reducer2});

myBeautifulReducers will be an object that contains both reducers (reducer and reducer2) and the logic you wrote in each of them (switch statements and so on).

1
votes

You only need 1 reducer to store your todos.

How can redux be called single state if each reducer have its own individual state.

The application effectively has only 1 global store where all the application state is stored. What the reducer returns is what effectively gets stored in the store.
The configuration of what is stored is a map (key-value) where the key is defined in the root reducer, and the value is what is returned from the reducer function.

The way you have to look at it is that the view is "dumb", in that the only thing it does is tell the app what it wants by dispatching an action. This action is just an event that is marked with some string you give it to identify clearly what it is the view wants. The reducer intercepts this action and updates the state in the store accordingly. This state in turn is accessible to all the components in your app. So it clearly is global.

In your example, the view would just tell the application for example: "Add a todo". The reducer will intercept this message and return an array with the added todo. This returned array is what will be saved in the store.

If you want a seperate "todo", this will probably refer to the currently "active" to do. Marking it as such will make the purpose more expressive.
This is single state because your root reducer will end up with something like: 

{
    "activeTodo": activeTodoReducer
    "todos": todosReducer
}

And you can access these key / values in your components throughout the entire application.