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: http://www.mediafire.com/view/jjpdwq37p59z67s/redux-chart.png
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)Register or Log In to View
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)Register or Log In to View
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)Register or Log In to View
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.