In a word

React-redux provides two core apis, Provider and Connect. Stroe can be bound to the Provider component, and the components wrapped by the Provider share data in the store. Connect is used in the internal component to connect the component with stroe. Connect is a function that takes two parameters. The first parameter, mapStateToProps, is a function that takes one parameter, state, as in store, and returns the data needed in the build. Attribute name used. Connect the second parameter is mapDispatchToProps mapDispatchToProps is a function that has a parameter for dispatch, returns an object, the object can be written in the form of the need to use a function, Dispatch (Action) : changes the data in the store.

index.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.jsx';
import {
    Provider
} from 'react-redux';
import store from './store/index'; // Provider is the core API provided by the React-DOM. Render (<Provider store={store}> <App /> </Provider>, document.getelementById ('root'));

Copy the code

app.jsx

import React, { Component } from "react";
import { connect } from "react-redux"; Class App extends Component {constructor(props) {super(props); // this.state = { // active:true
    // };
    // console.log(store.getState("active") // this.state = store.getState()render() {
    return (
    <div className="App">... <div> const mapStateToProps = (state) => {// state is the store state mapping console.log(state);return {
    inputValue : state.inputValue,
    active : state.active
  }
}
const mapDispatchToProps = (dispatch) => { // store.dispatch
  return{// write the functionbindActiveClick(tip) {
      console.log(tip)
      if (tip === true) {
        if (this.props.active === true) {
          return;
        } else {
          const action = {
            type:"change_active",
            value:true
          }
          dispatch(action)
        }
      } else {
        if (this.props.active === false) {
          return;
        } else {
          const action = {
            type:"change_active",
            value:false
          }
          dispatch(action)
        }
      }
    }
  }
}

exportdefault connect(mapStateToProps,mapDispatchToProps)(App); // Let the app component connect to the storeCopy the code