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: http://www.mediafire.com/view/jjpdwq37p59z67s/redux-chart.png
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.
Portfolio Site with Node JS & Express fullstack
React w Node & Express Server fullstack
Basic Node JS and Express node
Creating a REST API node
Mongo DB node
React Native Tutorial - Yelp Clone react native
React Native Tutorial - Messaging App react native
React Native - Instagram react native
Chat Site - Reddit Clone fullstack