Redux today. The learning materials are Chinese documents and MOOCs videos.

1. The story

1.1 motivation

React always reminds itself that it is just a view layer. There are ways to pass state, but if the way to pass state is slightly more complicated, the structure becomes very difficult to understand. To solve these state transfer problems, reDUx is needed. (Redux is not related to React itself, but redux is usually used in react.)

1.2 Core Concepts

• To change state with redux, you need to initiate an action, which is a JS object that describes what to do, or what to do.
• Action is just a normal JS object for description and does not change state. If you want to change state, you need to write a function called reducer. Reducer accepts a state, accepts an action, processes the state and returns a new state.
• There can only be one Reducer, but an application must write many functions. Therefore, many small reducers are compiled and these small reducers are called from a large reducer.

These concepts don’t even use the Redux API, which is one of the reasons why Redux is so small.

1.3 The Three Principles

1. The state of the entire application is stored in an object tree, which is then stored in a single store.
2. State is read-only. To change state, you can only initiate an action, and that action is just a normal object. In this way, neither the view layer nor the network request can modify state directly, but can only initiate a request, wait and then be processed in uniform order.
3. Reducer can only be a pure function.

Because Redux never changes state, you can use libraries such as immutable.

2. Use caution

2.1 Action naming conventions

Action is the only source of data passing from the app to the Store. It is usually used like this:

const ADD_TODO = "to do"; Import {ADD_TODO} from "./my_action.js" // define action {type: ADD_TODO, // must have a type, the value of the string ↑ text: "today I beat the screen of the N difficulty ", // except type, all fields can be defined optionally... {type: ADD_TODO, payload: {text: false, meta: {} }Copy the code

The naming convention for the action is here.

2.1.1 Action Creates a function.

Many of the action parameters are generated in the application, but writing the action in index.js is not easy to maintain or test. You need a way to store actions in separate files. Hence the concept of actionCreator. The action creation function is just a normal function that returns an action based on different arguments. Stored in a separate file, index.js uses this create function every time it creates an action, importing the parameters generated during the application.

2.2 reducer

Reducer is a pure function. This is important because we cannot call non-pure functions like date.now (), math.random (), in addition to not modifying parameters. Because reducer must be determined, as long as the same parameters are passed, the same values must be returned.

2.3 store

Store. Subscribe (callback) means that the callback is run whenever the store changes.

3. UI components and container components

The value returned by a component’s render can be complex, and can be separated out into a UI component.

4. redux-thunk

Use the Redux-Thunk middleware for asynchronous requests. Redux-devtools-extension can be used to import redux-DevTools-extension.

Redux-thunk allows action to be more than just an object, but also a function. In other words, not only an object but also a function can be returned in actionCreators.

• The usual actionCreator returns an object containing the type attribute:
• ActionCreator using Redux-Thunk can be:

Not much at first glance, thisIsn’t it just deriving a function? Full native JS syntax, I can do it without redux-thunk. But actually in components we can do this:Because it is an action, it can be dispatched. This one right herestore.dispatch(action)It’s basically callingaction().

But it’s still no big deal, rightJust export a function and call action(). Doesn’t this look like just replacing action() with store.dispatch(action)? But the nice thing is that in actionCreator we can pass a dispatch parameter, so we don’t have to introduce store in actionActioncreators.

5. The middleware

Redux’s middleware exists between the Action and reducer. After the action is initiated, some processing (side effects such as asynchrony) is done, and reducer is called to return the new state.

6. The side effects

Side effects are specific to functions/expressions and are a functional programming concept: a function/expression is said to have side effects if:

1. This function/expression modifies state outside the scope of the function.
2. This function/expression has obvious interaction with the outside world.

Typical examples are:

• ajax
• Modify the parameters of a function
• DOM manipulation

A pure function must have no side effects.

7. redux-saga

This requires knowledge of generators, which requires knowledge of iterators, and iterators require knowledge of Symbols. So I went to the Little Red Book to fill in the grammar. The use of redux-saga is more complex, and unlike redux-thunk, saga’s asynchronous code is written in a separate file. Async /await is implemented with Generator +yield.

8. react-redux

React-redux makes redux very easy to use.

1. Import Provider into the main file index.js and pass store to the entire application using context-like syntax.In this way, stores are directly applicable to the entire application, rather than importing each component.
2. React-redux removes store imports from each component. How does the store connect to the component? This can actually be divided into solving the following two problems:
   1. If a component wants to access data in a store, it does so through store.getState().xxx.
   2. If a component wants to change data in a store, it does so through store.dispatch(Action).
   • In other words, the connection is to solve the problem of getting state and dispatch:You can see that instead of importing store,It also eliminates the step of updating state with setState in subscribeAnd here it isConnect is called ConnectStore and component are now connected, instead of using setState to synchronize component state with store state every time store changes.
3. Since the state logic is extracted to mapDispatchToProps, the remaining component is a stateless component. So react-Redux actually divides components into UI components (defined components) and container components (connected components).