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
- 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
end
相关文章推荐
- 带着问题看 react-redux 源码实现
- React && Redux 学习笔记(一)
- 纪录一下react-redux的用法
- react-redux
- react,redux,webpack前端项目
- React和Redux的连接react-redux
- 基于react、react-redux的加减计数器
- 基于Redux的ReactNative项目开发总结(一)
- ReactNative redux 总结
- react-app-redux项目中的运用
- react-redux使用小结
- React和Redux的连接react-redux
- React Native架构之Redux
- redux、react-redux、redux-thunk、redux-saga使用及dva对比
- 使用Redux管理你的React应用
- 《React-Native系列》24、 结合Demo学习Redux框架
- redux 配合 react 在项目中的使用(个人总结与备忘)
- React实战-深入源码了解Redux用法之Provider
- 使用Redux管理你的React应用
- 对React-redux中connect方法的理解