Redux Walkthrough

Turbo 360

This project is a simple walk through for setting up a React project with Redux for state management. This is not a stand-alone project per se but rather, a simple, methodical introduction to Redux for basic background knowledge in other tutorials. In this series, we create the proverbial "To-do list" application using React and Redux from scratch. This is a good place to start if you have basic Javascript and React knowledge but have not explored Redux in depth yet.

High Level Overview (8:07)

In this video, we simply go through a high level overview of the Redux set up and flow. The Redux architecture takes a little getting used to and it is better to have a general understanding of the concept before diving into the code. We use a simple diagram to visualize the structure which you can download HERE:

Setting Up (28:44)

We set up the code base in this video by scaffolding a bare-bones web project then implementing the React and Redux libraries manually. We then include a component which renders a list of to-do items (cliche, I know) and include input fields for adding more items to the list.

Connecting to Redux (25:32)

In this video, we connect the React code base to the Redux environment and create a todo reducer to maintain the list of todo items. We then connect the Todo.js component to the Redux store and move the list from component state to the todo reducer..

Creating Todos With Redux (18:17)

In this video, we create Todo items using the Redux based action creators. We explore how actions and reducers work together and how to connect actions to container components. We then create a couple sample Todos using actions and show how components "react" to changes in the Redux store. Finally, we add a 'selected' todo item to the reducer in preparation for showing item details in another component.

Selecting Todo Item (12:19)

In this video we add another container component to the user interface in order to render more details about the selected todo item. We then connect the component to the Redux store and render the description of the todo item whenever the user selects one from the list. When the user adds a new item, we then set that as the selected one so that its description renders immediately after creation.

Join Free

Join for free today and deploy your site in seconds

Already have an account? Sign in HERE