React-Redux三重优化实战揭秘

相关基础代码讲解请看往期文章

容器组件

方式一

javascript 复制代码

//引入之前改造的UI组件
import CountUI from './count'
 
//引入store
import store from '../redux/store'
 
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。
 
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
 
//映射状态
const mapStateToProps = state => {( count：state )}}
 
//映射状态方法
const mapDispatchToProps = dispatch => (
    {
        jia：(number)=>{ dispatch(createIncrementAction(number)) },
        jian：(number)=>{ dispatch(createDecrementAction(number)) },
        jiaAsync：(number,time)=>{ dispatch(createIncrementAsyncAction(number,time)) },
    }
)
 
//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

方式二

javascript 复制代码

//引入之前改造的UI组件
import CountUI from './count'
 
//引入store
import store from '../redux/store'
 
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。
 
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
 
export default connect(
    state => {( count：state )}},
    dispatch => (
    {
        jia：(number)=>{ dispatch(createIncrementAction(number)) },
        jian：(number)=>{ dispatch(createDecrementAction(number)) },
        jiaAsync：(number,time)=>{ dispatch(createIncrementAsyncAction(number,time)) },
    }
)
)(CountUI)

方式三

react-redux的自动分发，不需要手动dispatch

javascript 复制代码

//引入之前改造的UI组件
import CountUI from './count'
 
//引入store
import store from '../redux/store'
 
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。
 
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
 
export default connect(
    state => {( count：state )}},
    {
        jia：createIncrementAction,
        jian：createDecrementAction,
        jiaAsync：createIncrementAsyncAction,
    }
)(CountUI)

mapDispatchToProps不仅可以是方法，也可以是对象

监听变化更新render

在上期文章使用redux依赖时，我们在index.js文件中有

javascript 复制代码

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
 
store.subscribe(()=>{
    ReactDOM.render(<App />,document.getElementById('root'))
})

检测redux中状态的变化，只要变化，就会调用render

而使用react-redux时，就不需要继续监听了，而是交给了connect

给容器传递store

在redux中会有这样的烦恼

javascript 复制代码

import React,{ Component } from 'react'
import Count from './containers/Count'
import Count2 from './containers/Count2'
import Count3 from './containers/Count3'
 
import store from './redux/store'
 
export default class App extends Component {
    reder(){
        return (
            <div>
                <Count store = { store }/>
                <Count2 store = { store }/> 
                <Count3 store = { store }/>
            </div>
        )
    }
}

而在react-redux中只需要在index.js文件中这样设置就行，不需要再一个个的给容器组件传递store

javascript 复制代码

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'

import { Provider } from 'react-redux'
 
ReactDOM.render(
    <Provider store={ store }>
        <App />
    </Provider>,
document.getElementById('root'))

整合容器组件和UI组件

之前我们分别将容器组件和UI组件写在了不同的文件中，那么它们能不能写在同一个文件中，这样就更方便管理了。

容器组件

javascript 复制代码

//引入之前改造的UI组件
import CountUI from './count'
 
//引入store
import store from '../redux/store'
 
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。
 
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
 
export default connect(
    state => {( count：state )}},
    {
        jia：createIncrementAction,
        jian：createDecrementAction,
        jiaAsync：createIncrementAsyncAction,
    }
)(CountUI)

UI组件

javascript 复制代码

import { React，{ Component } } from 'react'
 
export default class Count extends Component {
 
    state= {
        car:'0'
    }
 
    increment = () => {
        const { value } = this.selectNumber 
      
 
    }
    
    decrement = () => {
        const { value } = this.selectNumber 
       
 
    }
 
    incrementIfOdd =() => {
        const { value } = this.selectNumber 
    }
 
    incrementAsync = () => {
        const { value } = this.selectNumber
    }
    
    render(
        <div>
            <h1>当前求和为：</h1>
            <select ref={ c => this.selectNumber = c }>
                <option value="1">1</option>
                <option value="2">2</option> 
                <option value="3">3</option>
            </select>
            <button onClick = { this.increment }>+</button>
            <button onClick = { this.decrement }>-</button>
            <button onClick = { this.incrementIfOdd }>当前求和为奇数再加</button>
            <button onClick = { this.incrementAsync }>异步加</button>
        </div>
    )
}

整合代码

以容器组件为基，整合UI组件

javascript 复制代码

import { React，{ Component } } from 'react'
 
//引入store
import store from '../redux/store'
 
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。

//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
 
class Count extends Component {
 
    state= {
        car:'0'
    }
 
    increment = () => {
        const { value } = this.selectNumber 
      
 
    }
    
    decrement = () => {
        const { value } = this.selectNumber 
       
 
    }
 
    incrementIfOdd =() => {
        const { value } = this.selectNumber 
    }
 
    incrementAsync = () => {
        const { value } = this.selectNumber
    }
    
    render(
        <div>
            <h1>当前求和为：</h1>
            <select ref={ c => this.selectNumber = c }>
                <option value="1">1</option>
                <option value="2">2</option> 
                <option value="3">3</option>
            </select>
            <button onClick = { this.increment }>+</button>
            <button onClick = { this.decrement }>-</button>
            <button onClick = { this.incrementIfOdd }>当前求和为奇数再加</button>
            <button onClick = { this.incrementAsync }>异步加</button>
        </div>
    )
}
 
export default connect(
    state => {( count：state )}},
    {
        jia：createIncrementAction,
        jian：createDecrementAction,
        jiaAsync：createIncrementAsyncAction,
    }
)(Count)

根据案例总结react-redux优化

1、容器组件可以和UI组件整合为一个文件

2、无需自己给容器组件传递store，给</App>包裹一个<Provider store={ store }>即可

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

4、mapDispatchProps也可以简单写成为一个对象

5、一个组件要和redux"打交道"要经过哪几步？

1）定义好UI组件---不暴露

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

javascript 复制代码

connect(
    state => ({ key:value }),//映射状态
    { key：xxxAction }//映射方法
)

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