Redux of the react ecosystem

1. Why does the Redux front end need a state management library?

1. Redux, JSState regulatory framework, Reduxmake communication easier assembly, put storeon the assembly, all components and storecarry out transit

2. Redux The characteristics are as follows:

• Unidirectional data flow
• Predictability,state + action = new state
• Pure function update Store

Second, Redux has an in-depth understanding of Store, Action and Reducer

1. storeBy createStoreincoming reducercreated, comprising three methods, as follows:

• getState()To get the current status
• dispatch(action), Distribute one action
• subscribe(listener), Monitor storechanges

2. (state，action) => new state,As follows:

• Store
• Actions
• Reducer
• View

3. combineReducersCapable of accepting a plurality of reducerpost as a parameter, it returns a final packagereducer

4. bindActionCreators, Single or multiple ActionCreatortransformed into dispatch(action)a set of functions in the form of, not manually dispatch(actionCreator(type)), but may directly invoke a method

Three, use Redux in React

1. connect Working principle of high-end components

Four, Redux understands asynchronous Action, Redux middleware

1. (state，action) => new state,As follows:

• Store
• Actions
• Reducer
• View
• Middleware

2. ReduxMiddleware, Middlewareas shown below:

• Intercepted action
• issue action

3. Asynchronous actionnot special actionbut a plurality of synchronization actioncombination use

4. Middleware dispatcherintercepted actionspecial treatment

5. How Redux organizes Action and Reducer

1. Standard form Redux Actionof questions, as follows:

• All Actionput a file, unlimited expansion
• Action、Reducer Separate, need to switch back and forth when implementing business logic
• What are the system Actionintuitive enough

2. The new way, a single actionand reducerin the same file

3. The new method, one for each file Action, is as follows:

• Ease of development, not in actionand reducerswitch back and forth between documents
• Ease of maintenance, each actionfile is very small, easy to understand
• Easy to test, each business logic only needs to correspond to one test file
• Easy to understand, the file name is the actionlist is the name of the file actionlist

Six, Redux understands immutability of immutable data

1. Immutable data immutable data, immutable data is required, as shown below:

• Performance optimization
• Easy to debug and track
• Easy to guess

2. How to manipulate immutable data is as follows:

• Native writing,{...}, Object.assign
• immutability-helper
• immer