To Do or Not To Do: a Walkthrough For a To-Do Application Using React Redux
The final product from this walkthrough will allow users to create a task, toggle between the task being complete or incomplete and finally deleting the task. The application will look like this:
The first step I took was adding a redux folder to the src folder of my react app. I then added an actions, reducers and store folder in that redux folder.
Actions
My second step was building the actions folder. Actions are objects and they carry the data that is taken from the application to the store through a dispatch(will go into detail later).
My first file created was actionTypes.js. An action must have a type property that says what action is being completed. Types are string literals but it’s common practice to define them as string constants due to the ease it provides with the debugging process because if a type constant was to be misspelled it would throw a ReferenceError while if it was a string it would not throw an error at all. In this file I am just exporting all of the type constants.
The second file created was actions.js and in this file are action creators and these are functions that return an action. The action types are imported and are used as the values for action creators type.
Reducers
Reducers are pure functions meaning that you should not mutate the input due to side effects being created and instead should clone your input and modify that instead. Reducers take two parameters a state and an action object.
Store
The store is an object that holds all of the states in your project and there should only be one. It has a few methods on it such as dispatch a method that calls a state change. A store is created using the createStore function that takes a reducer.
Dispatch
In this walkthrough instead of using the connect function to connect the store to react components I will be using the useDispatch hook an easier and quicker alternative. The useDispatch hook references dispatch so it can be used to dispatch actions the action will reflect the objects used in actions.js but the variables will now have a value.
The apps repository : https://github.com/annedhyacinthe/redux-todo-practice
