Pure functions

define

A certain input must produce a certain output, and the output of the same input must be the same.
The function cannot cause side effects during execution.

meaning

Feel free to write and use.
Ensure that the function is pure and does not need to care about incoming content or rely on other external variables.

React requires that all React components act like pure functions, protecting their props from modification.

This means that the child cannot modify the value passed by the parent, which has side effects.

The Reducer requirement in REdux is also a pure function.

redux

what

The container that manages the state provides predictable state management, while React is responsible for helping us manage the view, and how the state is maintained is ultimately up to us.

how

The page has addition, subtraction, multiplication and division. Click on the Add, telling the Action Creators that I want to add X, that the Action has an Action type of plus and content of X, and that it is distributed through Dispatch into the Store repository. The Store does nothing and feeds the previous value and behavior into the Reducers. Reducers returns the new value to Store, and finally the component retrieves the new value via getState().
Redux requires that all data changes must be updated through dispatch actions. Action is a plain JS object that describes the type and content of the update.
Reducers(pure functions) connect state and action, and its function is to combine the incoming state and action to generate a new state(note that the new state rather than modifying the previous state cannot produce side effects). There are two states, one is the initialization state and the other is the processing state.

The principle of

For a single data source, the state of the entire application should be stored in an Object tree, and the tree should be stored in only one store.
State is read-only, and the only way to change state is to issue an action. You don’t have to worry about races.
Use pure functions to perform the modification, associate the old state with the action, and return a new state. As your application grows in complexity, you can break down the Reducers into smaller reducers that operate on portions of different State trees.

Timer case

Basic version

Redux lite version

npm i redux -S
Create a SRC/story/store. Js SRC/story/num_reducer. Js
store.js

num_reducer.js

Modify component writing

More violent re-rendering modified entry file index.js

Full version of Redux

Create a SRC/story/constant. Js

Create a SRC/story/num_action. Js

Modify num_reducer. Js

Modify component writing

Synchronous action and asynchronous Action

If an action is an object, it is called a synchronous action. If an action is a function, it is called an asynchronous action

Modify component writing

To run an error

The error message means that the action must be a plain object, please use the middleware of asynchronous action, that is, ask the third party to tell store to execute the function, and finally the function returns a plain object which is then sent to reducer for processing.

Install middleware NPM I redux-thunk-s to modify store.js

An optimization point for num_action.js

react-redux

background

Redux is not official with React. Redux is a library for use with react-Redux.

Model figure

Create a SRC/containers/Calculator/index. The JSX Calculator container components

The UI component is connected in place and ready to connect to the right hand redux that is, connect to store import store modify app.js

Container components and UI component status and methods of transmission and receiving modify SRC/containers/Calculator/index. The JSX

The UI component prints the result of this.props

A, b function renames introduce the action dispatch modification state modify SRC/containers/Calculator/index. The JSX

Modifying UI Components

Short for optimization of mapDispatchToprops (not necessarily functions but objects)

There is no need to monitor state changes in REdux. The React-Redux Connect method already handles the change entry index.js

Connect store optimization

Modify the App. Js

Modify the entry index.js

This is equivalent to all the components in the dependency injection APP that want to use the Store directly.

Integrated optimization modify SRC/containers/Calculator/index. The JSX

react-redux Hooks

Example of react-redux data sharing

Define a Student component and Calculator component to share data through Redux so you need to modify the Redux folder structure

Create Student container components under Containers

Modify app.js to introduce student component

Modify containers/Student/index. JSX

Modified constant. Js

Modify the story/actions/student. Js

Modify the story/reducers/student. Js

Preliminary results

Introduce reducer use of the Student component

It can be seen that the reducer of the Calculator component was only used here. How to use the reducer of the Student component?
Then see the containers/Calculator/index JSX redux/reducers/num. Js these two files

What we want to say here is that the current retained value of the Reducers is the value of Calculator component. If we want to get the retained value of the Student component, is the structure of the reducers going to change? Yes, the reducers structure should be changed into the form of objects in order to obtain the values retained by different components.
How do you change the structure? Is that what you want to write