redux的了解在 Redux了解、安装及简单使用、 Redux工程化开发已经有认识了

redux之前借助的是 React.createContext() 进行redux内公共状态传值，内部借用了多种操作，传值及获取store数据在 redux了解内，store的整体系统内容在 Redux工程化内

今天使用react-redux对获取redux内的操作进行简化

使用

使用 react-redux 有以下几步：

安装 react-redux [npm/yarn/pnpm/npx...看项目创建及其他使用，保持统一，亦可混用，但最好统一使用同一个]

npm install react-redux

引入 Provider，并将store挂载到上下文

import store from './store';
import { Provider } from 'react-redux';


root.render(
  <>
      <Provider store={store}>
        <Demo />
      </Provider>
  </>
);

3.获取上下文内的store属性

import { connect } from 'react-redux';


// 组件内通过props获取数据
function Demo(props) {
    let { 属性值 } = props
    
}
export default connect(
    state => state.store内的模块名称
)(组件名称)

API

Provider

作为上下文 Provider 的简便用法，提供上下文实例，将store注册到上下文中

connect

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

connect accepts four different parameters, all optional. By convention, they are called:

mapStateToProps?: Function
mapDispatchToProps?: Function | Object
mergeProps?: Function
options?: Object

mapStateToProps和mapDispatchToProps分别处理Redux存储的状态和分派。state和dispatch将作为第一个参数提供给mapStateToProps或mapDispatchToProps函数。

mapStateToProps和mapDispatchToProps的返回值在内部分别被称为stateProps和dispatchProps。如果定义了，它们将作为第一个和第二个参数提供给mergeProps，其中第三个参数将是ownProps。合并后的结果，通常称为mergedProps，然后将提供给所连接的组件。

mapStateToProps

可以获取到redux中的公共状态，把需要的信息作为属性，传递组件即可

如果指定了mapStateToProps函数，那么新的包装器组件将订阅Redux存储更新。这意味着任何时候更新存储，mapStateToProps都会被调用。mapStateToProps的结果必须是一个普通对象，它将被合并到包装组件的props中。如果你不想订阅存储更新，在mapStateToProps中传递null或undefined。

最多接收两个参数：

state: Object
ownProps?: Object

connect(state=>{
    return {
        count:state.count.count
    };
})(Demo);

state :存储redux容器中，所有模块的公共状态信息
state.count.count : 第一个count是store内划分的数据模块，第二个count是变量值count 这里等于是直接给组件传值 count

返回对象中的信息，就是要作为属性，传递给组件的信息

mapDispatchToProps

把需要派发的任务，当做属性传递给组件
connect()的第二个参数可以是对象、函数，也可以是未提供的。

不传值的情况：

connect()(MyComponent)
connect(mapState)(MyComponent)
connect(mapState, null, mergeProps, options)(MyComponent)

如果您将mapDispatchToProps定义为一个函数，那么调用它时将最多使用两个参数。

最多接收两个参数：

dispatch: Function
ownProps?: Object

connect(
    null,
    dispatch=>{
        // dispatch:store.dispatch 派发任务的方法
        // 返回对象中的信息，会作为属性传递给组件
        return {
            ...
        };
    }
)(Demo);

dispatch

如果你的mapDispatchToProps被声明为一个接受一个参数的函数，它将被给定你的商店的分派。

const mapDispatchToProps = (dispatch) => {
  return {
    // dispatching plain actions
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' }),
  }
}

代码

store内的代码和 Redux工程化开发内的store代码相同

案例是一致的，可以和 Redux了解、安装及简单使用内的案例对比Demo内的代码差异

目录结构

图片.png

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
// antd汉化
import { ConfigProvider } from 'antd'
import zhCN from 'antd/locale/zh_CN';

import Demo from './views/test-react-redux/Demo';
import store from './store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <ConfigProvider locale={zhCN}>
      <Provider store={store}>
        <Demo />
      </Provider>
    </ConfigProvider>
  </>
);

Demo.jsx

import React from 'react'
import DemoMain from './DemoMain';
import DemoChange from './DemoChange';
import { connect } from 'react-redux';

function Demo(props) {
    let { count } = props
    return (
        <div>
            <div>总计：{count}</div>
            <DemoMain />
            <DemoChange />
        </div>
    )
}

export default connect(
    state => state.count
)(Demo)

DemoMain.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux';

class DemoMain extends Component {
    render() {
        let { count } = this.props
        return (
            <div style={{ margin: '20px 0' }}>
                展示内容:{count}
            </div>
        )
    }
}

export default connect(state => state.count)(DemoMain)

DemoChange.jsx

import React from 'react'
import { Button } from 'antd'
import action from '../../store/action';
import { connect } from 'react-redux';

function DemoChange(props) {
    let { add, sub } = props
    return (
        <div>
            <Button type="primary" onClick={() => {
                add()
            }}>增加</Button>&nbsp;
            <Button type="primary" onClick={() => {
                sub()
            }}>减少</Button>
        </div>
    )
}
export default connect(
    null,
    action.count
)(DemoChange)