Setup Redux Step by Step Part 1

These are my notes on how to setup a Redux Store for React following a tutorial from https://codewithmosh.com/

1. Create Reducer
First we create a reducer, with initialState=[],the reducer could als be changed to switch if you prefer this.
The Reducer must be export default and should never mutate state.

We have 2 simple actions here
1)addTodo
2)removeTodo

/reducer.js
let lastId = 0;

function reducer(state = [], action) {
  if (action.type === 'addTodo')
    return [
      ...state,
      {
        description: action.payload.description,
        id: ++lastId,
        status: 'open',
      },
    ];
  else if (action.type === 'removeTodo')
    return state.filter((todo) => todo.id !== action.payload.id);
  else return state;
export default reducer;`
}

2.Create Store
Here we create a store which takes our reducer.The store takes the actions and forwards them to the reducer

/store.js
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

3.Dispatching Actions
This is our first simple dispatch "addTodo"

import store from './store/store';

function App() {
  store.dispatch({
    type: 'addTodo',
    payload: {
      description: 'first Todo',
    },
  });
  return <div className="App">Landing Page</div>;
}

export default App;

4.subscribe/unsubscribe to store
Here you can subscribe to the store, the function will be executed everytime the store changes

store.subscribe(() => {
    console.log('store changed', store.getState());
this function gets called every time the store changes
  });

unsubscribe:
const unsubscribe = store.subscribe(() => {
    console.log('store changed', store.getState());
  });

5.Add Types

Use Types so we do not have to hardcode them and we can change them in one single place

/types.js
export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';

6.To not always have to call the actions you can use Action Creators

import * as actions from './types';

export function addTodo(description) {
  return {
    type: actions.ADD_TODO,
    payload: {
      description,
    },
  };
}

export function removeTodo(id) {
  return {
    type: actions.REMOVE_TODO,
    payload: {
      id,
    },
  };
}

7.Use Action Creators
To use the action creators we call the store dispatch with the new created actions

store.dispatch(addTodo('First todo'));
store.dispatch(removeTodo(1));

In the next post i will show how to simplify this using redux toolkit. So stay tuned :)

Comments

[Seif Sekalala]

Bro!!! 👏👏👏 Good job!!! 😊✊💛