A beginner’s guide to Redux

In our add_todo action will return “ADD_TODO” as the type and the todo item we want to add to the store as the value (we need the store to add this todo item to the state so it gets passed in here)..In the remove_todo we return “REMOVE_TODO” as the type and the index of the todo item in the store as the value..We’ll need this to remove it from the list of todos.We define our 2 actions here in action creators..These are what our reducer reads when it is triggered to update the state.If you return to our reducer function definition hopefully it now makes more sense..By reading the action.type the reducer knows whether it needs to add a todo to the state or remove one from it..It has the todo item passed in the add_todo..It appends to the current state using the spread operator..In the remove_todo it uses the spread operator to create a new array appending the current state sliced twice, once with all the elements before the one to remove and second with all the elements after the one to remove, thus creating our new state object with the todo item removed.The reducer function that we defined earlier onHowever, this still isn’t a complete picture..We have not yet covered how the reducer gets called and passed in the right action..For that, we will need to move on to define our dispatch function.6..Define the dispatch, attach these to where the dispatches will be triggered (ie event listeners etc)The dispatch function is a method of the store which is used to trigger a change in the state..Any event or anything which needs to update the state must call the dispatch method to do so.. More details

Leave a Reply