React-Redux实践与优化-优快云博客

本文链接：https://blog.youkuaiyun.com/lightning_fawn/article/details/107827544

react-redux

由于redux的写法太繁琐，还需要每次重新调用render，不符合react编程。所以出现了react-redux
安装react-redux

npm install react-redux --save

react-redux提供了两个api

Provider 顶级组件，功能为给我们提供数据
connect 高阶组件，功能为提供数据和方法

例子

新建一个store.js文件，用于管理修改数据方法

import { createStore } from 'redux'

// 编写reducer
// state默认参数，action操作类型
const myReducer = (state = 0, action) => {
    switch (action.type) {
        case 'add' : {
            return state + 1
        }
        case 'reduce' : {
            return state + 1
        }
        default: {
            return state
        }
    }
}

// 创建数据仓库，把reducer传入createStore
const store = createStore(myReducer)

export default store

新建一个子组件

利用connect高阶组件装饰子组件，让子组件的props混入store的属性和操作方法。

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

// 返回数据的方法，给connect，它会把数据转换成props,数据管理器
const mapStateToProps = (state) => {
    return {
        count: state
    }
}

// 返回dispatch的方法，给connect，把dispatch转换成props，方法管理器
const mapDispatchToProps = (dispatch) => {
    return {
        add: () => dispatch({ type: 'add' })
    }
}

// 通过装饰器改造Redux02的props
@connect(mapStateToProps, mapDispatchToProps)
class Redux02 extends Component {
    render() {
        return (
            <div>
                <p>Redux测试</p>
                {/*数据已经通过mapStateToProps混入到了props了*/}
                <div>{this.props.count}</div>
                <div>
                    {/*add方法已经通过mapDispatchToProps混入到了props了*/}
                    <button onClick={this.props.add}>加法</button>
                </div>
            </div>
        )
    }
}

export default Redux02

修改index.js入口文件

利用Provider顶阶派发数据

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { Provider } from 'react-redux'
import store from './redux02/store'

ReactDom.render(
    <Provider store={store}>
        <App></App>
    </Provider>
    , document.getElementById('root'))

redux中间件

由于redux reducer默认只支持同步，实现异步或者延时任务时，需要借助中间件。
没有使用中间件时的redux数据流：可以看到，数据更新是直接同步修改并更新视图的。
使用了中间件middleware之后的redux数据流：交互会经过中间件的统一处理，完成同步或异步后进行更新的。
redux-thunk 支持reducer在异步操作结束后自动执行。

npm install redux-thunk --save

redux-logger 打印日志记录协助本地调试

npm install redux-logger --save

applyMiddleware 使用包含自定义功能的 middleware 来扩展 Redux 是一种推荐的方式。用来加载中间件。

import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'

// 编写reducer
// state默认参数，action操作类型
const myReducer = (state = 0, action) => {
    switch (action.type) {
        case 'add' : {
            return state + 1
        }
        case 'reduce' : {
            return state + 1
        }
        default: {
            return state
        }
    }
}

// 创建数据仓库，把reducer传入createStore
// applyMiddleware 使用包含自定义功能的 middleware 来扩展 Redux 是一种推荐的方式。
const store = createStore(myReducer, applyMiddleware(thunk, logger))

export default store

使用中间件thunk后，redux就可以支持异步了。

抽离reducer和action统一管理

在实际开发中，reducer和action是应该统一管理的

新建一个count.redux.js存放reducer和action

/**
* reducer开始
 * 用于store,修改数据的具体实现
* */
// 编写reducer
// state默认参数，action操作类型
export const myReducer = (state = 0, action) => {
    switch (action.type) {
        case 'add' : {
            return state + 1
        }
        case 'reduce' : {
            return state + 1
        }
        default: {
            return state
        }
    }
}

/**
 * reducer结束
 * */


/**
 * Dispatch开始
 * 用于页面，页面需要调用那些修改数据的方法，混入后页面可以直接用this.props.方法名称,调用方法修改数据。
 * */
// 返回dispatch的方法，给connect，把dispatch转换成props，方法管理器
export const mapDispatchToProps = (dispatch) => {
    return {
        add: () => dispatch({ type: 'add' }),
        asyncAdd: () => {
            setTimeout(() => {
                dispatch({ type: 'add' })
            }, 1000)
        }
    }
}

/**
 * Dispatch结束
 * */


/**
 * State开始
 * 用于页面，页面的props需要混入那些数据，混入后页面可以直接用this.props.数据名称,获取数据。
 * */
// 返回数据的方法，给connect，它会把数据转换成props,数据管理器
export const mapStateToProps = (state) => {
    return {
        count: state
    }
}
/**
 * State结束
 * */

export default {
    mapDispatchToProps,
    myReducer,
    mapStateToProps
}

原先的store.js修改为

import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import { myReducer } from './count.redux'

// 创建数据仓库，把reducer传入createStore
// applyMiddleware 使用包含自定义功能的 middleware 来扩展 Redux 是一种推荐的方式。
const store = createStore(myReducer, applyMiddleware(thunk, logger))

export default store

页面内改为：方法和数据都从同一的地方引入

import React, { Component } from 'react'
import { connect } from 'react-redux'
// 把方法和数据都从同一的地方引入
import { mapDispatchToProps, mapStateToProps } from './count.redux'


// 通过装饰器改造Redux02的props
@connect(mapStateToProps, mapDispatchToProps)
class Redux02 extends Component {
    render() {
        return (
            <div>
                <p>Redux测试</p>
                {/*数据已经通过mapStateToProps混入到了props了*/}
                <div>{this.props.count}</div>
                <div>
                    {/*add方法已经通过mapDispatchToProps混入到了props了*/}
                    <button onClick={this.props.add}>加法</button>
                    <button onClick={this.props.asyncAdd}>延时加法</button>
                </div>
            </div>
        )
    }
}

export default Redux02