Setup React with Redux

Viking Jonsson
Sep 15, 2019 · 6 min read
Photo by Christopher Gower on Unsplash

When React applications grow, the state can become hard to manage. With Redux, the state is easier to manage, and there is also an excellent dev tool called ReduxDevTools. In this post, I’ll try to explain how to set up a React application with Redux.

Dependencies

I create this project with create-react-app, and then I added some dependencies for redux. So to get started, you should create a project using create-react-app. I prefer to use npx, but you can do as you like.

File structure

This is an overview of how I usually start with my file structure; of course, it possible to structure it in other ways as well.

App

This is the App component. If we had a layout component, I would have rendered that here. But we don’t have that in this tutorial.

index

Two important things are going on here. the named import of Provider from react-redux and the configureStore from the file we created called the store.

The provider is needed to be able to connect to Redux. You’ll later see what I mean about connect.

Store

The store is where the state is saved. I usually copy this from the documentation and make some minor adjustments for it to fit my needs. Here I, for example, added.

This is how we connect the Redux dev tools to our application.

Reducers

The reducer is used to change the state, and the state should not be altered in any other way than by the reducer. This is one part of what makes Redux so good. It is only one way to change the state, so it is easy to understand when something goes wrong. Notice that the data is not modified. It is replaced with a copy of the data with the new data put in. This is a good practice even you don’t use Redux or React. It is way easier to debug and find problems.

Action types

Action types are a string that is usually saved as a constant for reusability reasons. Action types will be used in action creators and the reducers.

Ducks

Ducks are a way to structure your code. The duck includes the action creators and selectors that are needed for a component; down below is a duck for the TodoListContainer component.

Action creators create an object which is later dispatched to change the state. These “action objects,” together with Redux’s dispatch function, is what is called an action. Selectors are a way to get a specific property from the Redux state.

Connected component

I’m not sure if this is called a connected component.. but what I mean by this is that for a component to be able to communicate with the Redux state it needs to be connected to Redux. This is done with Redux’s connect function. It used in conjunction with the export of the component.

The connect function is returning a function — that’ why it looks a bit weird. The first function is taking optional arguments. The first one is mapStateToProps which is an object with the state properties we want to use in our component. The second argument is mapDispatchToProps which is how we add functions to our component, and we wrap them in Redux’s dispatch function.

Both of these objects are returned from functions, mapStateToProps function is passed state as an argument, and mapDispatchToProps is passed dispatch as an argument. These arguments are given to the functions via the connect function. But these details are not necessary to remember, just copy those parts from the documentation and rewrite them to fit your needs.

From here on, things work in the usual way. Use prop drilling to get the todos and addTodo where you need them. Of course, you could use Redux in the child components as well. Here I used a container component and rentering another component. I do this because I want the TodoList to be reusable. To learn more about container components and how this pattern favors reusability I recommend that you read this post.

Component with hooks

I usually get a bit confused with the connect, mapStateToProps and mapDispatchToProps. Fortunately, react-redux 7.1.0 came with some nifty hooks. The hooks are called useSelector and useDispatch, and down below, I refactored the component to use this hook instead. Remember, hooks only works with functional components.

TodoList

TodoItem

TodoForm

Start the app

Now you can test the application and see how things are connected. This is an excellent way to start to understand how the parts communicate. If you want to know more about the concepts of Redux, I recommend that you read this post.

With the Redux DevTools you’ll now be able to see what action is being dispatched and how the state is replaced with a new state.

Redux DevTools

The Startup

Get smarter at building your thing. Join The Startup’s +730K followers.