Course address: https://www.imooc.com/learn/744

node-pulling

webpack-build

1. Understand data flow

this.props - passed between parent and child components

the current state of the this.state component

2. Installation framework and introduction

Two package installations (redux itself is a separate framework)

Four important folders

action - behavior

components, container stores components

reducer-distribution behavior

index.html - template, server.js - build and run project, webpack - package project

Pure method: what is passed in, can be passed out directly without relying on others, such as timers

store is generated by creatStore in redux

3. Official demo

1. Introduction to structure and related configuration

start debugging

Dependency version

Start a framework instance

Organizing files

Entrance

Pack

Express: The most famous server under node, like php, web servers such as django and java under python. Some data can be dynamically inserted into the template.

easier

Usually packed in memory

The rendered prize is converted into a js tag and packaged into a file

Entry - hot reload, run file

handle js

Introduce no need to add js

Convert high-level ES6, ES5 or syntactic sugar to ES3 to achieve

This directory does not need to be escaped

Run in the directory, install node_moudles

2. Project realization

(1) action adds user behavior

Create a new index.js in the action directory

A. The abstract action of adding a to-do item:

Give a variable id without text to distinguish two identical to-do items that do not act at the same time

B. Set visible

C. Click to trigger to-do behavior

Three user behaviors are described

(2) The reducer's response to user behavior

(adding and triggering behavior affects)

describe todo add todo state

Object.assign() is a new ES6 syntax, which merges the state with the object behind {}, and assigns it to the object with the empty {} in front

It's not actually used, but it's written for completeness

to-do list

The incoming state and the output state are both the concept of an array

Finish processing to-dos and to-do lists

Create a new visibilityFillter.js under reducers to store the filter

The state tree should be thought up before developing the system

ES6: Give state an initial value, SHOW_ALL

After opening, it will be selected

Provide an export method in todo.js

Create a new index.js under the reducer, and import the related methods

Take out the method, give the output

The response of the system in the project is written

(3) Components (slightly difficult, with es6 syntax and some understanding)

Create a new App.js under components and store three components

The difference between different locations, for better reuse

Create a new AddTodo.js file under the container and introduce the connect method of react-redux

connect-advanced writing

View source code.

Usually ordinary methods will return a value, but this connect method returns a function

The connect method is well written. I have time to look at it. There are only more than 300 lines.

Increase dispatch for distribution

The incoming text is written by the input, and the ref is bound

Add AddTodo button

Mix display and logic in container

Next, separate the display and logic, and write a pure container component:

Create a new VisibleTodoList.js under the container and introduce related

A react component is composed of two types of props, one is converted by its state (click the button, his state will change, and the props property will change), and the other is changed by dispatch (a type of behavior needs to be changed. when distributing)