一句话

react-redux 提供两个核心api,分别是供用者Provider,和connect。Provider组件上可以绑定stroe，被Provider包裹的组件会共享store里的数据。内部组件中使用 connect 让组件与stroe 做连接。connect是一个函数，有两个参数，第一个参数 mapStateToProps 是一个函数，里面有一个参数为state，就是store中的state，返回组建中需要的数据，在组建中通过 this.props.属性名使用。connect的第二个参数是mapDispatchToProps,mapDispatchToProps也是一个函数，有一个参数为dispatch, 返回一个对象，对象中可以写组建中需要使用的函数，dispatch(action),改变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 是 react-dom提供的核心API，意思为共用者，被Provider包裹的组件可以用store数据

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

复制代码

app.jsx

import React, { Component } from "react";
import { connect } from "react-redux"; // connect是react-redux提供的核心api，让组件做连接

class App extends Component {
  constructor(props) {
    super(props);
    // this.state = {
    //   active: true
    // };
    // console.log(store.getState("active"))
    // this.state = store.getState() // 获取redux 中的 值
  }
  render() {
    return (
    <div className="App"> 
    ...
    <div>
    
    const mapStateToProps = (state) => { // state是store中的 state 映射
  console.log(state);
  
  return {
    inputValue : state.inputValue,
    active : state.active
  }
}
const mapDispatchToProps = (dispatch) => { // store.dispatch
  return {
    // 写函数
    bindActiveClick(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)
        }
      }
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(App); // 让 app组件和 store做连接
复制代码