Background
Before diving into building the TodoMVC application, let's review Redux and some of the tools that we will be using. These are already integrated into the react-app-template, but you will need to understand how they work to take on more involved projects.
Understanding Redux
This is mostly sampled from the Redux docs.
Principles
Redux can be described in three fundamental principles:
Single source of truth. The state of your whole application is stored in an object tree within a single store.
State is read-only. The only way to mutate the state is to emit an action, an object describing what happened.
Changes are made with pure functions. To specify how the state tree is transformed by actions, you write pure reducers.
Elements
Actions
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().
Constants
Actions must have a type property that indicates the type of action being performed. Types should typically be defined as string constants. Once your application is large enough, you may want to move them into a separate constants module.
Reducers
Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of a reducer.
Components & Containers
The user interface of a Redux application consists of components. Redux components can be built with React, Angular, Ember, jQuery, or vanilla JavaScript.
That said, Redux works especially well with frameworks like React and Deku because they let you describe the UI as a function of state, and Redux emits state updates in response to actions.
A container is the root component in the hierarchy, responsible for connecting the presentation components to Redux and rendering them.
Look at Thinking in React to better understand how to design components and containers.
Store
The Store is the object that brings together actions that represent the facts about “what happened” and the reducers that update the state according to those actions. The store has the following responsibilities:
Holds application state;
Allows access to state via getState();
Allows state to be updated via dispatch(action);
Registers listeners via subscribe(listener);
Handles unregistering of listeners via the function returned by subscribe(listener).
It’s important to note that you’ll only have a single store in a Redux application. When you want to split your data handling logic, you’ll use reducer composition instead of many stores.
Data Flow
Redux architecture revolves around a strict unidirectional data flow. The data lifecycle in any Redux application follows these 4 steps:
You call store.dispatch(action).
The Redux store calls the reducer function you gave it.
The root reducer may combine the output of multiple reducers into a single state tree.
The Redux store saves the complete state tree returned by the root reducer.
What is Babel?
Babel is a generic multi-purpose compiler for JavaScript. Using Babel you can use (and create) the next generation of JavaScript, as well as the next generation of JavaScript tooling. ... Babel does this by compiling down JavaScript code written with the latest standards into a version that will work everywhere today.
One of the most important roles that Babel plays is that it allows us use most of the new JavaScript features in your code today, even though browsers haven't fully implemented the new standards.
What are the most important new features in ECMA-262 6th Edition / June 2015?
What is Webpack?
Webpack is a module bundler.
Webpack takes modules with dependencies and generates static assets representing those modules.
Why another module bundler? Existing module bundlers are not well suited for big projects (big single page applications).
-- webpack docs
Last updated
Was this helpful?