- Redux is a predictable state container for JS apps.
-
is for JS application not tied to React, and can be used with any other JS libraries.
-
it is a state container, i.e stores the state of the application.
- the state of the application is the state represented by all the individual components of the app.
- redux will store and manage the application state.
- it is predictable.
- the changes to the application state is predictable.
** React-Redux is the official Redux UI binding library for React
- shop -> stores cakes on a shelf
- shopkeeper -> at the front of the store.
- customer -> at the store entrance.
- customer -> buy a cake
- shopkeeper -> remove a cake from the shelf -> receipt to keep track.
- The state of your whole application is stored in an object tree within a single store.
- maintain the application state in a single object which would be managed by the Redux store.
- The only way to change the state is to emit an action, an object describing what happened.
- to update the state of the app, you need to let Redux know about that with an action.
- not allowed to directly update the state object.
{
type: BUY_CAKE
}
- To specify how the state tree is transformed by actions, you write pure reducers.
Reducer - (previousState, action) => newState.
Responsibilities::
- Holds the application state
- Allows access to state via getState()
- Allows state to be updated via dispatch(action)
- Registers listeners via subscribe(listener)
- Handles unregistering of listeners via the function returned by subscriber(listener)
- Is the suggested way to extend Redux with custom functionality
- Provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.
- Use middleware for logging, crash reporting, performing asynchronous tasks e.t.c.
-
axios -> Requests to an API end point.
-
redux-thunk -> Define async action creators.