Redux Part 1: Intro

My Notes

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 getState
store.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