React: React-redux

📢 Hello everyone, I am Xiao Cheng, a sophomore front-end enthusiast

📢 This article is a study note for learning react-Redux

The 📢 React column has been fully updated on GIthub

📢 Thank you very much for reading

📢 May you be true to yourself and love life

The introduction

Before, we learned about Redux. When we wrote the case, we also found some problems with Redux, for example, the component cannot share the state, each state component needs to be monitored by subscription, and the state update will affect all component updates. Facing these problems, React provides the React-Redux library based on redux

In the previous example, if we wrote the Store directly in the React application’s top props, each sub-component could access the top props

< top-level component store={store}><App />
</ Top-level component />
Copy the code

This is similar to react-Redux

Container components and UI components

1. All UI components need to be wrapped in a container component
2. The container component is responsible for dealing with Redux and is free to use the Redux API
3. The UI component does not have any Redux API
4. The container component handles the logic, and the UI component only handles rendering and interaction, not logic

In our production, we can write UI components directly into the container component’s code file, eliminating the need for multiple files

First, we create a Containers folder under the SRC directory for storing various container components, create Count folder in this folder, that is, to create Count container components, and then create index.jsx to write the code

To connect the container component to the UI component, we need connect

// Import UI components
import CountUI from '.. /.. /components/Count'
// Introduce connect to connect UI components
import {connect} from 'react-redux'
// Establish a connection
export default connect()(CountUI)
Copy the code

More on that later

Provider

Since our state can be used by many components, react-Redux gives us a Provider component that can inject stores in Redux globally by registering the Provider with the root component

For example, we need to do this when all of the following components need to use the Store, but this is an inconvenient addition to the workload

<Count store={store}/>
{/ * sample * /}
<Demo1 store={store}/>
<Demo1 store={store}/>
<Demo1 store={store}/>
<Demo1 store={store}/>
<Demo1 store={store}/>
Copy the code

In the index.js file in the SRC directory, import the Provider, wrap the App component with the Provider tag, and write store in the Provider

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>.document.getElementById("root"));Copy the code

So in the app.jsx file, the component can use store without specifying store by hand

connect

When we looked at the React-Redux schematic earlier, we saw that the container component needed to pass state and methods to the UI component, using props, which looked simple. However, we see that there doesn’t seem to be a case in the container component where we normally pass props

At this point, you need to continue to explore the only function in the container component, connect

The connect method is a connector used to connect container components to UI components. On its first execution, it takes four optional parameters, and the result of its execution is a function. The second execution takes a UI component

The four parameters for the first time are mapStateToProps, mapDispatchToProps, mergeProps, and Options

mapStateToProps

const mapStateToProps = state= > ({ count: state })
Copy the code

It takes state as an argument and returns an object that identifies the UI component’s parameter of the same name,

The key in the returned object is the key passed to the UI component props, and the value is the value of the props

In the code above, we can read the count value directly through props in the UI component

<h1> The current sum is: {this.props.count}</h1>
Copy the code

Now that we have state passing between UI components and container components, how do we pass methods?

mapDispatchToProps

The second parameter accepted by Connect is mapDispatchToProps, which is used to map the UI component’s parameters to the Store. dispacth method

We can write the parameters as objects and define the methods that the action executes, for example, what function does JIA perform and what function does Jian perform?

We can define all of them in this argument. Here we define the corresponding operation functions of several methods

{
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction
}
Copy the code

Connect is pretty polished at this point, but think about how redux works

There seems to be something missing. We called the function here and created the Action object, but it looks like the Store didn’t execute the dispatch. Is that broken? Can’t enforce it?

In fact, react-Redux has been optimized for us. When actionCreator is called, it will immediately send the action to the store instead of manual dispatch

• Automatically invoke Dispatch

Complete development

First we write our container components directly in the Containers folder, without having to write the UI components

First type RCC to type the specified code snippet, then expose the connect method

import { connect } from 'react-redux'
Copy the code

Expose the method that creates the action from the action file

import {createIncrementAction} from '.. /.. /redux/count_action'
Copy the code

Write UI components, write a simple demo, binding props and methods

return (
    <div>
        <h2>The current sum is: {this.props. Count}</h2>
        <button onClick={this.add}>I add 1 point</button>
    </div>
);
Copy the code

Call the Connect wrapper to expose the UI component

export default connect(
    state= > ({ count: state }),/ / state
    { jia: createIncrementAction } / / method
)(Count);
Copy the code

The first time the argument is executed, state and an action object are passed directly

---

Thank you very much for reading, welcome to put forward your opinion, if you have any questions, please point out, thank you! 🎈