文章目录

• 1、mapDispatchToProps 简写成对象
• • 1.1、代码层面精简
  • 1.2、API层面精简
• 2、react-redux自动监测
• 3、Provider
• 4、文件层面优化
• • 4.1、项目结构
  • 4.2、CODE
• 5、优化总结

本示例修改自 上一章 求和Demo

1、mapDispatchToProps 简写成对象

1.1、代码层面精简

• containers/Count/index.jsx

/* 这是Count的容器组件 */
// 引入 Count 的UI组件
import CountUI from '../../components/Count_Redux'
// 引入 connect 用于连接UI组件与Redux
import { connect } from 'react-redux'
//引入action
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction
} from '../../redux/count_action'// connect创建并返回一个Count的容器组件
export default connect(state => ({ count: state }),dispatch => ({add: num => dispatch(createIncrementAction(num)),sub: num => dispatch(createDecrementAction(num)),asyncAdd: (num, time) => dispatch(createIncrementAsyncAction(num, time)),})
)(CountUI)

1.2、API层面精简

• containers/Count/index.jsx

mapDispatchToProps 可以写成对象形式

// connect创建并返回一个Count的容器组件
export default connect(state => ({ count: state }),{add: createIncrementAction,sub: createDecrementAction,asyncAdd: createIncrementAsyncAction}
)(CountUI)

2、react-redux自动监测

• 入口 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);// 不需要手动监测了，react-redux 自动监测
// store.subscribe(() => {
//   root.render(
//     
//       
//     
//   );
// })

3、Provider

Provider 让所有组件都可以得到state数据

• 入口 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './redux/store'
import { Provider } from 'react-redux';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(store}>
);

4、文件层面优化

• 整合UI组件和容器组件

4.1、项目结构

component 整个文件夹被干掉了，Count UI组件整个塞到 容器组件里

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n7sHsFBC-1669801871426)(C:\Users\Administrator\Desktop\学习笔记\react_redux.assets\image-20221130174818771.png)]

4.2、CODE

• containers/Count/index.jsx

import React, { Component } from 'react'
// 引入 connect 用于连接UI组件与Redux
import { connect } from 'react-redux'
//引入action
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction
} from '../../redux/count_action'// 定义UI组件
class Count extends Component {state = {num: 1}add = () => {const { num } = this.statethis.props.add(num)}sub = () => {const { num } = this.statethis.props.sub(num)}oddAdd = () => {const { num } = this.stateconst { count } = this.propsif (count % 2 === 1) {this.props.add(num)}}asyncAdd = () => {const { num } = this.statethis.props.asyncAdd(num, 2000)}render() {const { count } = this.propsreturn (
当前求和为：{count}
e => { this.setState({ num: e.target.value - 0 }) }}>1}>12}>23}>3  this.add}>+  this.sub}>-  this.oddAdd}>奇数+  this.asyncAdd}>延迟+
)}
}// 暴露容器组件
export default connect(state => ({ count: state }),{add: createIncrementAction,sub: createDecrementAction,asyncAdd: createIncrementAsyncAction}
)(Count)

5、优化总结

1. 容器组件和UI组件整合一个文件

2. 无需自己给容器组件传递store，给包裹一个即可

3. 使用了 react-redux 后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作

4. mapDispatchToProps 也可以简单的写成一个对象

5. 一个组件要和redux “打交道” 要经过哪几步？

   1. 定义好UI组件—不暴露

   2. 引入connect生成一个容器组件，并暴露，写法如下：

      1. connect(state => ({key:value}), //映射状态{key:xxxxxAction} //映射操作状态的方法
         )(UI组件)
         

   3. 在UI组件中通过 this.props.xxx 读取和操作状态