React+redux official instance Todo from the simplest introduction (2)--Increase

Although the official website of the todolist example written in very detailed, but are one step, is to give you an action, good guy, all are written, give you a reducer, all the functions are written well, but we these small white how can be digested so much, then we come to dismantle, Step by step implementation, imagine our development program is also a functional area implementation, then our first step is to first the overall structure of the idea, and then first to make the head, so look is not much simpler!

Download from the official website mode, and then configure what, I will not make, the inside of all the things deleted, and then one by one to write, or learn a react to learn to configure the environment, time is not much, the approximate structure is such

　　

First of all we want to complete the most basic layout: Portal file Index.js, container component Containers,reducers, subcomponents components, and index.html, the most basic ready, at least on the page to display

In fact, todolist a total of our most commonly used 4 functions, increase-delete-change-check, then we have a realization, the first realization is to increase

Entry file: Index.js

　　

Container components: (here must pay attention to props, layer by layer pass, want to have this thing in its parent to pass down, for example here of Addtodo={action.addtodo}, want to have this thing)

　　

　　

Presentation components:

　　

It's a this.props.addTodo up here, you notice?

　　

The sub-component of the lowest level, the method is implemented here, one layer at a level to the top, update the state

　　

State of declaration: Contants

　　

　　

Action: What to do (action and reducer two good friends are responsible for updating state)

　　

　　

Reducers:

　　

Todos.js

　　　

Index.js

　　

　　

The state is generally listed separately.

This is written in contants (as the state increases, the components are increased, written separately, also for ease of maintenance)

　　

To this step, the basic is realized, look at Chrome's Debugging tools: initial Data

　　

Now let's enter a few text to see the change

　　

This is the top-level action and store, nothing mysterious, see it, the first step to achieve, in order to show it well, we make a humble view, more intuitive

Add a shell mainsextion to fill the outer layer of the data

　　

　　

Sub-component Todoitem, used to plan each displayed style

　　

And put this in the container assembly.

　　

Come on, take a look at the effect.

　　

A few more.

　　

　　

　　

　　

React+redux official instance Todo from the simplest introduction (2)--Increase