Redux for Beginners : JavaScript
What is Redux?
Redux is a javascript library, which is used to store state. we can call it as a state management app. In other terms we can say that, it is responsible for managing the states of your app in one place, you can change the state when you require only by passing an action.
In simple language, the explanation would be -
Redux has one store where we will have all our state stored and you can pass any action from your app which tells to store that change of the state based on action.
Generally, it depends on these 4 steps, now we will go through each step and learn what it is-
- Store
- Reducer
- Subscribe
- Dispatch
Firstly, we need to setup a React project, we will do that using react-create-app.
npx create-react-app <repo_name>
cd my-app
npm start
For starting the newly created react-app you need to do npm start .
To better understand, you can follow https://github.com/facebook/create-react-app
Now, you need to install Redux, it is available on npm so you can simply install from there using-
npm install --save redux
And, you have your react app ready with redux.
Let’s look into the detail of the steps mentioned before.
1. Create Store:
One app can only have one store. For creating the store you need to import createStore from redux.
import {createStore} from “redux”;const store = createStore(reducer, state);
createStore uses reducer and state(initial state) as a parameter and return store with all the states of the app.
2. Reducer:
Reducer is nothing but a pure javascript function that takes an old state and an action as parameter and returns a new state based on that particular action. We should not mutate the state instance of mutation, we should return a new copy of state.
const reducer = (state = true, action) => {if (action.type === "MAKE_IT_FALSE") { return false;}return state;};
3. Subscribe:
When the store changes, a callback function of `store.subscribe()` will fire. And, getState is used for returning all the states of the app.
store.subscribe(() => {console.log(“ hello”, store.getState()); //when state is changing calling this.});
In real world applications, we should not use subscribe because if we do, we need to pass the store manually in other components which is difficult, so react-redux provides us with provider which is used for wrapping your app and it passes the store all the way down.
<Provider store={store}><App/></Provider>4. Dispatch:
Dispatch passes an action through your app which tells the store about which state we need to update. Basically using action we are sending some information from your app to store. It is the only way to change the store.
Action:- It is a piece of information that will be sent through your app to store.
const todo = MAKE_IT_FALSE
store.dispatch({ type: “REACT”, value: “ lets learn react” });
Leaving you all with an example which includes all the 4 steps, which we learned above.
import React from "react";
import { createStore } from "redux"; class ReduxStore extends React.Component {
render() { // Step-2 create reducer (state, action)
const reducer = (state, action) => {
if (action.type === "REACT") {
return action.value;
}
return state;
}; // step-1 create the store (reducer, state)
const store = createStore(reducer, "JS");
// step-3 create subscription
store.subscribe(() => {
//when state is changing calling this.
console.log("-->hello", store.getState());
});
// step-4 dispatch an action
store.dispatch({ type: "REACT", value: " lets learn react" }); return null;
}
}export { ReduxStore };
https://gist.github.com/shreyaa1/63f2bf96e4d0f7f6aeb1ebbf687c7e9a
That’s all for Redux as of now. Any type of further queries or clarification is welcomed, you can either comment it down below or you can reach me via my social media handles from my profile.
