Looking at the following application,
is the selected tab part of the state?
Is the data that populates the chart part of the state of the application?
Are both data from the API and the selected tab part of the state?
The box metaphor
You could think of Redux as a box.
The three principles
-
The state of the app is stored in one JavaScript object.
-
The state is read-only, but we can change the state by describing a change with another JavaScript object called action.
- Changes are executed by pure functions called reducers. A reducer accepts the current state and an action and returns a new state or the same state.
The store
The store is the core of the library and it wires the three principles up.
The store contains three methods:
-
getState
-
dispatch
-
subscribe
here is an example using it: https://codesandbox.io/s/00o0lr67lp
Key concepts
-
Redux follows the one-way data flow of React.
-
Redux keep the state of the application in a single read-only JS object
-
To change the state we dispatch actions and reducers process the changes.
- All the reducers receive all the actions.