A talk about React and Redux for ABQ WebGeeks by Damon Toal-Rossi.
We'll use the universal TodoMVC project, which provides us stylesheets and functional goals.
This repository is organized into "chapters" by git branch. Each branch is based on the last.
git checkout 1-the-input
We add our first component representing the application. It doesn't do anything, but that's the point: components are just wrappers for
other components, whether they're native (i.e. <input>
) or more complex.
We place this top-level component in a folder called "containers" to separate it from lower-level components. This will become more clear in later chapters.
git checkout 2-some-todos
Add a few static todos in the container, then display them through a hierarchy of components, again illustrating that everything is just a
component, including <li>
, <label>
and <input>
tags.
git checkout 3-add-todos
By moving the todos
list in our container into state1 we can now modify it, in this case by adding new todos
to the todos
list. We do this by adding a onKeyUp
listener to the input, allowing us to either save or clear the value.
1: this isn't really a good way to structure real-wold applications, but serves the purpose of this demo. We'll fix this in a later chapter.
git checkout 4-todo-completion
By passing down callbacks from our top-level container component, we can capture events from child components to toggle the completion status of a todo. We're careful to only move the state forward by returning new objects and arrays.
git checkout 5-introduce-redux
As we continue to add functionality, our Container starts getting pretty busy. It's time to implement application state using Redux.
Redux maintains the application state in a "store". It doesn't care how you structure this, it just provides tools for managing this state through "actions" and "reducers".
Actions are things that happen in the application, like addTodo
or setTodoComplete
. They do not modify the application state, just
announce that something should happen. Actions are simple function that return intent and optionally some payload.
Reducers are simple functions that modify the state of the application. They are not called directly, but rather get called by Redux a result of matching an Action*'s intent.
When an update happens to the application state, this is passed down through the application as props. We connect our high-level Container
to Redux with connect
, which maps application state to this.props
in the Container.