三、React-redux库的使用

安装

npm install react-redux

集成index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import {Provider} from 'react-redux'
import store from './store'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

react-redux是为了联系react和redux结合使用的第三方库。他提供了一个connect函数，调用该函数会返回一个高阶函数。在调用高阶函数接收一个组件做参数，connect函数本身接收一个函数做参数，为了将state里面的数据映射到组件里, 另一个函数映射dispatch

connect(mapStateToProps, mapDispatchToProps)(index);

组件中使用

connect函数

connect是一个函数，返回值是一个高阶函数 调用返回值的函数,参数接收一个组件

import { connect } from 'react-redux'

// 参数1是为了告诉组件store中哪些数据需要映射到组件里
export default connect(参数1)(Index)

使用

import React, { PureComponent } from "react";

import { connect } from "react-redux";

export class index extends PureComponent {
  btnClick() {
      this.props.addNumber(num)
  }
  render() {
    const { counter } = this.props;
    return (
      <div className="wrap">
        <hr />
        <h1>React-Redux</h1>
        <h2>{counter}</h2>
        <button onClick={() => this.btnClick(num)}>+</button>
      </div>
    );
  }
}

// connect是一个函数，返回值是一个高阶函数 调用返回值的函数
// function mapStateToProps(state) {
//   return {
//     counter: state.counter,
//   };
// }
const mapStateToProps = (state) => ({
  counter: state.counter,
});

const mapDispatchToProps = (dispatch) => ({
  addNumber() {
      dispatch(NameAction)
  }
});
export default connect(mapStateToProps, mapDispatchToProps)(index);