二、【react-redux】react-redux优化

本示例修改自 上一章 求和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.StrictMode>
    <App />
  </React.StrictMode>
);

// 不需要手动监测了，react-redux 自动监测
// store.subscribe(() => {
//   root.render(
//     <React.StrictMode>
//       <App />
//     </React.StrictMode>
//   );
// })

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(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

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.state
        this.props.add(num)
    }

    sub = () => {
        const { num } = this.state
        this.props.sub(num)
    }

    oddAdd = () => {
        const { num } = this.state
        const { count } = this.props
        if (count % 2 === 1) {
            this.props.add(num)
        }
    }

    asyncAdd = () => {
        const { num } = this.state
        this.props.asyncAdd(num, 2000)
    }

    render() {
        const { count } = this.props
        return (
            <div>
                <h1>当前求和为：{count}</h1>

                <select onChange={e => { this.setState({ num: e.target.value - 0 }) }}>
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                </select>
                &nbsp;&nbsp;
                <button onClick={this.add}>+</button>&nbsp;&nbsp;
                <button onClick={this.sub}>-</button>&nbsp;&nbsp;
                <button onClick={this.oddAdd}>奇数+</button>&nbsp;&nbsp;
                <button onClick={this.asyncAdd}>延迟+</button>
            </div >
        )
    }
}



// 暴露容器组件
export default connect(
    state => ({ count: state }),
    {
        add: createIncrementAction,
        sub: createDecrementAction,
        asyncAdd: createIncrementAsyncAction
    }
)(Count)

5、优化总结

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

2. 无需自己给容器组件传递store，给<App/>包裹一个<Provider store={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 读取和操作状态