React-Redux Provider connect 使用

1.简述

React-Redux 是 Redux 的官方 React 绑定库。
React-Redux 能够使React组件从Redux store中读取数据，并且向 store 分发 actions 以更新数据。
React-Redux 并不是 Redux 内置，需要单独安装。
 

3.安装redux和react-redux

• npm install redux;
• npm install react-redux;

4.app.tsx中使用Provider包裹后代元素,绑定store

import React, { useRef, useEffect, useState } from 'react';
import A from './components/A'

import { Provider } from 'react-redux';
import store from './store/store';   //提前创建好store

const App: React.FC = () => {


  return (
    <>
      <Provider store={store}>
        <A></A>
      </Provider>

    </>
  );
};

export default App;

5.在A组件中用connect去获取store数据和触发ation

connect是一个高阶组件(高阶组件：传入一个组件，它会返回新的加工后的组件)。

connect有四个参数([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])后面两个参数可以不写，不写的话它是有默认值的。
主要关注前两个参数： mapStateToProps和 mapDispatchToProps。

mapStateToProps：如果定义该参数，组件会监听rRedux store的变化。任何时候，
只要 Redux store 发生改变，mapStateToProps 函数就会被调用。
mapDispatchToProps：如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，对象所定义的方法名将作为属性名；
每个方法将返回一个新的函数，函数中dispatch方法会将 actioncreator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。
使用方法：把指定的state和指定的action与React组件连接起来，后面括号里面写UI组件名

import { useEffect, useState } from 'react';
import * as actions from '../../store/action';  //提前创建好的action
import { connect } from "react-redux"

const A = (props: any) => {
    return (
        <>
            <p>A数量：{props.count}</p>
            <button onClick={props.createActionAdd}>++</button>
            <br />
            <button onClick={props.createActionSub}>--</button>

        </>
    )
}
const mapStateToProps = (state: any) => state;   
const mapDispatchToProps = {     
    ...actions
}
export default connect(mapStateToProps, mapDispatchToProps)(A);