Redux Part 1: Intro

Read docs lmao

Introduction

Image Credit: Redux Docs

Basically we have Reducer function that takes state & action and generate new store(returning new state). we will have a initial state so it can work initially. We can call this reducer function with dispatch function that is available on store. Using this we dispatch an action which calls reducer function which generates new store

Now, To get the latest state of store we subscribe to Redux store so whenever store changes we will know

Lets see some code:

import {createStore} from 'redux';
import {v4 as uuid} from 'uuid'; //for unique id
function counterReducer(state = 0, action) {
switch (action.type) {
case 'counter/incr':
return state + 1;
case 'counter/decr':
return state - 1;
case 'counter/amount':
return state + action.payload;
default:
return state;
}
}
const store = createStore(counterReducer);export default store;

Store is created using createStore function from redux library. it takes a reducer function as argument. We have 0 as initial state.

Now, we have access to dispatch, subscribe and getState function of store object.

<button 
onClick={() => store.dispatch({ type: 'counter/incr'})}>
+
</button>
<button
onClick={() => store.dispatch({ type: 'counter/decr' })}>
-
</button>
store.subscribe(()=> console.log(store.getState()))

when button is clicked it dispatches an action which we get as parameter in reducer function. Then, we check which switch case it matches to and return state according to that. we can also of if else statements instead of switch case.

Now, when button is clicked, for example “+” button , it will dispatch an action and returns new state. subscribed function of store will get updates whenever store changes.

combineReducers

if we have multiple reducers then we can use combineReducers

const store = createStore(combineReducers({ counter: counterReducer, todos: todoReducer }));

here we have two reducers which we combine using combineReducers function. our store will be like,

{counter:0, todos:[]}//we can access those value using subscribe and getStatestore.subscribe(()=>console.log(store.getState().counter))
store.subscribe(()=>console.log(store.getState().todos))

we can use local state(useState hook or this.state) for updating the UI

--

--

--

Taking notes

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

javascript/problem-solving-techniques/window-sliding — Length of the smallest substring which…

Creating Enemy Explosions

Lessons Learned From A Buggy React Upgrade

Typescript Class Constructor that Accepts Itself for Initialization

Rapid Install of In House Dependencies

One handleChange() to Rule Them All

What is the best JavaScript framework for 2021?

“This” keyword in Object method

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Natsume sei

Natsume sei

Taking notes

More from Medium

What is Redux and Why we should use Redux?

State: React Hooks Or React Classes

How to mock React HCaptcha with Jest

Testing Ag-Grid React’s Custom Cell Renderer Component