您的位置:首页 > Web前端 > React

react-redux

2020-08-06 14:50 896 查看

react-redux

  • 由于redux的写法太繁琐,还需要每次重新调用render,不符合react编程。所以出现了react-redux
  • 安装react-redux
npm install react-redux --save
  • react-redux提供了两个api
  1. Provider 顶级组件,功能为给我们提供数据
  2. connect 高阶组件,功能为提供数据和方法

例子

  1. 新建一个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
  1. 新建一个子组件
  • 利用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
  1. 修改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是应该统一管理的

  1. 新建一个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
}
  1. 原先的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
  1. 页面内改为:方法和数据都从同一的地方引入
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

end

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: