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 :)
Top comments (1)
Bro!!! 👏👏👏 Good job!!! 😊✊💛