Getting started with react-redux

Frontend Development

Published about 2 months ago




Redux — image from https://www.valentinog.com/blog/redux/

I had a friend who struggled with Redux for a Long time and his main story was “He can’t get a hang of it, or the flow is mysterious”. Later, I got to know some people struggle with Redux because of its flow. In this tutorial, we will go through an easy way to get Redux setup for your React project and build a simple application with it.

There are lots of excitement going on about context API and React hooks, but I still feel Redux is perfect for large applications.

Note: I won’t be explaining some react concept like state and lifecycle, I will suggest you follow a react course if you don’t know React.Redux provides a simpler way to manage your state in a central store.N.B — React can be used without Redux using local states but Redux provides you with a centralised store, managing all you states in a simpler way.
For this tutorial, we will use CRA to set up React boilerplate. We will set up Redux on a simple Todo List application.

Hurray😎, I am so happy to dive in, Let's get started.

In your terminal, create a new react app using create-react-app a library from facebook.

npx create-react-app todo-list
This will create a boilerplate for a React application, we don't need to know how it is done, just use it 😄. Check out webpack if you want to set the application up from scratch.

cd todo-listyarn start //this will start the application on port 3000

This will start your react application and you should see a page like this.
Everything is working — OOOOPSS

You can check the files and folders created by create-react-app, and you will be astonished seeing things that have been done for you. You should see something like this:

Created by create-react-app

We will be interacting with files in the src folder.

Note:

  1. index.js — the entry point of the application
  2. App.js — this is where we will put our code
Copy and paste this in your src/App.js file and you should have a template of the todo app.



The handleSubmit function is just logging out our todos. Let's make it functional by adding redux into our application.

Now we have something like this:

We need two packages to enable us to use Redux in this application. We will put the todos property in our state into Redux and add some actions to add and delete todo from the DOM

The main package responsiple for using redux is:
  1. Redux — the overall package which will add meat to our React application.
  2. React-Redux — allows React to use redux
Let's install the two:

yarn add redux react-redux -D
Let’s connect our application to redux, open up index.js and add this code



I imported Provider from react-redux to wrap our parent component so every component in our application will be able to use the content in the store. CreateStore is gotten from redux package to create a redux store by passing a reducer function to it.

To complete the puzzle lets create an action.js and reducer.js file.

<script src="https://gist.github.com/Danielshow/b9169d2c5135067270ec6538d3b88d79.js"></script>

action.js
In action.js, the needed types are declared and we created two functions that return an object which have a key type and payload.



In reducer.js, we create a variable initialState to hold our state and create a reducer function which returns an object after performing some logic to get our todos from the payload and add it to the list of todos in the central store and also the second case to delete it from the list using javascript filter.

Finally, we will add two main functions to connect our App.js component to enable us to connect to the store.

import { connect  } from "react-redux";import { addTodo, deleteTodo } from "./action"; 
const mapStateToProps = state => ({  todos: state.todos});
const mapDispatchToProps = dispatch => ({   addTodo: todo => dispatch(addTodo(todo)),   deleteTodo: id => dispatch(deleteTodo(id))});export default connect(mapStateToProps, mapDispatchToProps)(App)
mapStateToProps: connect the local store to props

mapDispatchToProps: connect the created actions to props

connect: This package takes in mapStateToProps and mapDispatchToProps and returns an higher-order component which wraps our App component.

Our final App.js looks like this:

That’s all for Redux. Thanks for reading.

I am Danielshow.


Login