Author: Shui Tao
Pursue technology, but not lose the fun of life, live the life you want

Introduction to React-Redux

• React-Redux enables your React project to have global data, allows multiple React components to read global data, and allows them to modify it.

• React-Redux can be interpreted as Vuex in a Vue, but it is also a global state (this is skipped without understanding Vue).

• React-Redux consists of a store, an action builder, and a reducer.The store maintains the global state, the action builder creates the action object, reducer processes the action object, and updates the store.

React-Redux Installation

Open the vscode terminal and enter: npm install --save--dev react-redux redux Enter to download and install
The ReactRedux version information in this article is as follows
React-Redux version: 7.1.3
Redux version: 4.0.4

Concept padding

There are two components in React:

• Display component: Display data only, no business logic.
• Container component: Has state, Has business logic.

Show component examples:

function Show(props){
   return (
      <div>
         <div>Full name:{props.name}</div>
         <div>Gender:{props.sex}</div>
      </div>
   );
}

Container component example:

class ShowContainer extends Component{
   constructor(props)
   {
      super(props);
      this.state={
        name:"Slightness",
        sex:"male"
      };
   }

   render()
   {
     let {name,sex} = this.state;
     return <Show name={name} sex={sex}/>;
   }
}

You can see that the display component is rendered in the container component and that all the data for the display component comes from the container component

Create Container Component

• Introduce the connect function in React-Redux to create container components

Create container component code as follows

/*Introducing the connect function*/
import {connect} from "react-redux";

/*Declare Show Components*/
function Show(props){
   return (
      <div>
         <div>Full name:{props.name}</div>
         <div>Gender:{props.sex}</div>
      </div>
   );
}

function mapStateToProps(state){
   if (typeof state == "undefined") return { name: "", sex: "" };
   return {
     name:state.name,
     sex:state.sex
   };
}

/*action Constructor*/
function onChangeName(data){
   return {
     type:"NAME",
     data:data
   };
}

function mapDispatchToProps(dispatch){
   return{
      onChangeName:(data)=>{dispatch(onChangeName(data));}
   };
}

/*Create Container Component*/
let Container = connect(mapStateToProps,mapDispatchToProps)(Show);

Code parsing:

• Import the connect function from React-Redux.
• Declare the function component Show - used to display data.
• Write the mapStateToProps function: The parameter is the state object of the container component, which maps the state object value of the container component (in the case of Container) to the props property of the corresponding display component (in the case of Show component), so subsequent Show components can get the state.name of the container component directly through props.name.
• Write the onChangeName function: to create an action object, the type attribute must exist in the action object, otherwise an error will be reported.
• Write the mapDispatchToProps function: the first parameter of the function is the dispatch function, the mapDispatchToProps function returns an object, each property of the object is a function, the function finally calls the dispatch method, dispatch method passes in the action object, when dispatch is called, triggers the reducer function in the store to update the store.
• Call connect to generate the container component: using the connect function, passing in the mapStateToProps and mapDispatchToProps functions as parameters, a function is returned, the Show component is continued to be passed in, and the container component of a Show component is finally generated. In this case, the state of this container component will correspond to the props of the Show component in the way that the mapStateToProps function is mapped.And props have functions mapped in mapDispatchToProps that can be called in the Show component to update the store. Container components, like the padding I started with, use container components on the page and actually render the display components.

At this point, we have generated the container component and are able to display the state data of the container component in the display component and modify the store.So the question arises, what is the state setting for container components?How to create a store?Next, 666.

Create a store

• Introduce the createStore function in redux to create a store
• createStore requires a function as a parameter, which is reducer, which is a function

The code to create the store object is as follows:

/*Introducing createStore*/
import {createStore} from "redux";

/*Declare a reducer function and set the default value of state*/
const reducer = function(state={name:"",sex:""},action){
    switch(action.type)
    {
       case"NAME":
          return {name:action.data};
       break;

       case"SEX":
          return {age:action.data};
       break;
    }
};

/*Create store object*/
let store = createStore(reducer);

The first parameter of the reducer function sets the default value of the global state object. The second parameter is the object returned by the action constructor. The reducer does different things according to the action.type. The final returned object is merged with the current global state to update the store.

Use Provider to get global data for components

The Provider component takes all descendant container components wrapped by it to the state in its store property as its own state object, so simply create the store property that is passed to the Provider, and let the Provider wrap the container component as the parent element. The state of the container component is there.

• Introducing Provider components in React-Redux
• Create a store
• Pass in store as the store property of the Provider component
• By wrapping the container component under the Provider, the state of the container component gets the data in the store and maps it to the display component, which can display the global data. The display component can modify the global data by calling the method mapped in mapDispatchToProps

import {Provider} from "react-redux";
import {createStore} from "redux";

/*Write reducer*/
const reducer=(state={name:"Slightness",sex:"male"},action)=>{
   switch(action.type)
    {
       case"NAME":
          return {name:action.data};
       break;

       case"SEX":
          return {sex:action.data};
       break;
    }
};

/*Create a store*/
let store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <Container/>  
  </Provider>
,document.getElementById("root"));

Final DEMO

/*Introducing necessary functions*/
import {connect,Provider} from "react-redux";
import {createStore} from "redux";
import {render} from "react-dom";

/*Declare Display Component*/
function Show(props){
   /*Call onChangeName to modify global data*/
   function change(){
     props.onChangeName("change");
   }

   return (
      <div>
         <div>Full name:{props.name}</div>
         <div>Gender:{props.sex}</div>
         <input value="Change Name" type="button" onClick={change} ></input>
      </div>
   );
}

/*Write mapping props function*/
function mapStateToProps(state){
   if (typeof state == "undefined") return { name: "", sex: "" };
   return {
     name:state.name,
     sex:state.sex
   };
};

/*action Constructor*/
function onChangeName(data){
   return {
     type:"NAME",
     data:data
   };
};

/*Writing a map dispatch function*/
function mapDispatchToProps(dispatch){
   return{
      onChangeName:(data)=>{dispatch(onChangeName(data));}
   };
};

/*Create Container Component*/
let Container = connect(mapStateToProps,mapDispatchToProps)(Show);

/*Declare a reducer function and set the default value of state*/
const reducer = function(state={name:"",sex:""},action){
    switch(action.type)
    {
       case"NAME":
          return {name:action.data};
       break;

       case"SEX":
          return {sex:action.data};
       break;
    }
};

/*Create store object*/
let store = createStore(reducer);

render(<Provider store={store}>
  <Container/>
</Provider>,document.getElementById("root"));

Run it, click the button, it will change the name

Here, the simplest principled Demo is done.

• Container container components are generated by the connect(mapStateToProps,mapDispatchToProps)(Show) method.
• The Container component renders the Show component.
• The mapping relationship between the props property of the Show component and the state of the Container component is configured by mapStateToProps and mapDispatchToProps.
• Create a store through createStore - createStore(reducer)
• Setting up a Provider's store and placing the Container under the Provider element allows the Container to get the store in the Provider as its own state and complete the mapping, so the mapping configured in connect can also be interpreted as a mapping to the store