A beginner’s guide to Redux

Last updated 248 days ago by Safeer Hayat

redux

Understanding Redux as a beginner can be quite confusing. Redux has an abundance of new terms and concepts which are often pretty unintuitive. This guide presents a very simplified example of a Redux implementation. I will define each of the steps and terms in a way that makes sense to a complete beginner.

This is intended to be a guide to demystify Redux elements. It does not contain the most technically accurate definitions. It does not have the best ever practices. It does have definitions that will help develop an understanding for someone with no prior knowledge of these concepts. There is a simple implementation as to not confuse with unnecessary details.

The example we will run through in this guide will be a simple todo app. The app allows a user to add or remove todo items and see them displayed on the page.

I will run through step by step each element of Redux, explaining what that element is and how to implement it with code examples. Scroll to the bottom to see the full code example which will show how it all fits together as a complete React app.

Steps Summary

  1. Write the reducer function
  2. Instantiate the store in the root component
  3. Wrap the components with the component, passing in the store as a prop
  4. Write the component
  5. Define the actions
  6. Define the dispatch, attach these to where the dispatches will be triggered (ie event listeners etc)
  7. Define the mapStateToProps function
  8. Export the connect function, passing in mapStateToProps and null as the 2 arguments and passing the component name in the second pair of brackets

Steps

1. Write the reducer function

The reducer function is a function which tells the store how to respond to actions. The function returns the new and updated state whenever an action is dispatched. State is immutable (can’t be changed) so the reducer always returns a new state. The reducer usually uses the spread operator to insert the current state into a new object/array and appending to it. Common practice is to use a switch/case statement and check the type property of the action passed in. Then write the code that updates the state for each case.

We write our reducer function first because we will need to pass this when we instantiate our store. To understand what’s happening though requires some knowledge of actions and dispatch. We will cover this further on in this guide.

For now know that our todo app will need to interact with the store in 2 ways: to add a new todo item to the state and to remove a todo item from the state. Therefore we write our function so that it responds to 2 cases of the action type. It uses the action value to either add or remove a todo item from the state.

The reducer is passed 2 parameters: state (this is the entire state currently in the store, and we give it a default value if state does not exist yet) and the action. We return the state in the default case.

Read full Article