So far we have covered state, actions, reducers, and how they participate in the one-way data flow. Where, in JavaScript, does all of this take place?
Redux uses a special object called the store. The store acts as a container for state, it provides a way to dispatch actions, and it calls the reducer when actions are dispatched. In nearly every Redux application, there will only be one store.
We can rephrase our data flow using the new term:
- The store initializes the state with a default value.
- The view displays that state.
- When a user interacts with the view, like clicking a button, an action is dispatched to the store.
- The dispatched action and the current state are combined in the store’s reducer to determine the next state.
- The view is updated to display the new state.
We won’t be writing any code for the store during this lesson, but it’s important that you understand this term for future Redux lessons.
Instructions
Follow the diagram’s one-way data flow. Notice how the store contains the reducer and state. It receives actions and calls the reducer with the action and current state.