React+redux official instance Todo from the simplest introduction (6)--end

By implementing an increase-and-delete------the mechanism of react combined with Redux has almost been understood, so take the rest of the functionality together.

Select All

1, state of declaration, this is the state of all selected

2. Action Agreement

3, reducers, update store

4. The underlying component implementation function

5, upper component data transfer

This is where the all-in-choice feature is implemented.

Show the number of action and delete completed action

The whole process is identical.

4, (Show action number of view)

(delete completed's view)

Put it in the footer.

Data communication on the parent component of the upper layer

The final parent component (view)

The whole process is so simple and clear!

All the functions of the official todolist are realized here! In fact, to achieve such a seemingly simple, in fact, a little simple project, the key is to master the Redux Grammar, communication between the react components, there is the basic grammar, logic, a lot of ES6 grammar and some of the less common I have to live in the comments, inside all, my original intention is, we must first understand, Do not see a bit along with the writing, so even if you write the effect, it is not necessarily you master, so you need to understand, and then write, so it is very easy to write, I just started, see a tutorial immediately followed by writing, write write on the problem, go to the code, in fact, this habit is not good, understand and then write Will greatly accelerate your study progress!

React+redux also has a lot of high-level features waiting for our district excavation, in fact, now I feel that I am just getting started, record a flash of this moment, we encourage each other! I hope the comrades who have been fortunate to see this series of articles help!!!

React+redux official instance Todo from the simplest introduction (6)--end