I'd been struggling with understanding the terminologies in redux. I tried reading the official documentation and then gave up. I tried procrastinating by telling myself that a little time(3 days) would make the little I could understand settle in. Maybe that worked, because after watching 20 videos of this tutorial by codevolution, I finally understand the concepts and I'd like to talk about them so it sticks even more:
Here are my notes from the videos watched:
Redux can be used with React, Angular, Vue and even just Vanilla js.
Redux is a state container i.e it stores the state of your application.
The state of an application could be an array, for example, if you have a usersListComponent, your state could be an array of users. In a login component, state could be an object with the following keys :the username, password, submitting(with a boolean of false). State can include the UI logic as well like is UseLoggedIn(with a boolean value), isModalOpened and so on.
Redux is predictable–all state transitions are explicit and it’s possible to keep track of them.
With redux, the state is managed outside the components in a container. Then sends the value to all the components who need it.
Other alternatives to redux are ReactContext–prevents props drilling.
React-Redux package is an official UI binding library for react. It offers some functions for easy use.
There are three concepts in Redux; store, action and reducer. The reducer can be likened to a shopkeeper in a cake shop. It’s the connecting link between the action and the store which can be described as the intention to buy a cake(action) and the store (the cake shop). The store holds the state of the application, the action describes the changes in state, the reducer carries out the state transition depending on the action.
Three principles of redux are:
- The state of your application is stored in an object tree within a single store.
In the cake shop example, we would be tracking the number of cakes in the shop. In redux, this data would be stored as an object with the number of cakes like{numberOfCakes: 10}.
2)If you want to change the state of your app, redux must be made aware of this with an action. You cannot directly mutate the state. In a cake shop, we wouldn’t as a customer take the cake directly from the cake store, we need to tell the shop keeper about our action, which is our intention to buy a cake. In code, this would be an object with a type property like
{type:BUY_CAKE}
Therefore state is read-only.
- We need to write pure reducers to determine how the state changes. Pure reducers are functions that take the state and action as inputs as parameters and return a new state.
The reducer is the shopKeeper.
We will reduce the count by one.
Once an action has been dispatched, the reducer then updates the state. The value is then passed on to the App because the App is subscribed to the store.
Actions:
The only way the app can interact with the store.
They are plain js objects. Must have a type property. The type property are defined as string constants.
const BUY_CAKE = ‘BUY_CAKE’
//Now, define the action
{type:BUY_CAKE}
Other than type, the structure of the action is completely up to you. Example, you can add an info property in the object like:
{type:BUY_CAKE
info: ’First Redux store’
}
We also need an action creator that returns the action. Action creators are functions. For example:
function buyCake(){
return{
type:BUY_CAKE
info: ’First Redux store’
}
}
Reducers:
They specify how the app’s state changes in response to actions sent to the store.
They return the next state of the app.
Start by defining the state:
const initialState={
numOfCakes: 10
}
const reducer =(state=initialState, action)=>{
switch(action.type){
case BUY_CAKE return{
…state//we have to make a copy of the state because in real world apps, we don’t just have one property in the object, so to avoid mutating the state, we need to create such copies.
numOfCakes: state.numOfCakes - 1
}
default: return State
}
}
Redux Store:
We will always have one store.
It is responsible for holding the app’s state.
Allows action to state via getState()
Allows state to be updated via method dispatch(action)
Registers listeners via subscribe method : subscribe(listener)
Handles unregistering of listeners via the function returned by subscribe(listener)
The createStore function only accepts one reducer, so how do we combine both?
It’s simple. We use a method called combineReducers:
const combineReducers = redux.combineReducers
//write this at the top of the file
Then, before we create our store, we combine the reducers. The convention is to rename this to rootReducer:
const rootReducer = combineReducers({
cake:cakeReducer,
icecream:icecreamReducer
})
const store = createStore(rootReducer)
Middleware:
This is the suggested way to extend redux with custom functionality. If you want redux with extra features, this is the way to go. It provides a third party extension point between dispatching an action and the moment it reaches the reducer.
You can use middleware for logging, crash reporting, performing async tasks etc.
The middleware we’d be using is the redux-logger.
const reduxLogger = require(’redux-logger’)
const logger = reduxLogger.createLogger()
//how do you include a middleware?
const applyMiddleware = redux.applyMiddleware
Then in the createStore function, add it as a second parameter:
const store = createStore(rootReducer, applyMiddleware(logger))
These are the short notes I took while watching and I feel like I finally understand redux better. Will keep studying more in the coming days.