背景
最近开始实习，部门主要使用的是一个内部的跨端框架，这东西本质上还是React Native，只不过是做了一层套娃重命名了标签名称(像极了ReactRouter和ReactRouter-Dom的关系)，并且封装📦了自己的一堆私有的API。由于导师就是负责开发这个框架，因此很无奈只能转React，做React开发了(印证了之前的猜想)。
今天这篇文章主要就分享一下我在使用Redux过程中的一些笔记📒或者使用经验。
(本文章不会详细阐述其具体的使用方法，只是会记录一些实际应用的效果)
区别
- 相同点
- 两者都是函数
- 用于将Redux的Store映射到组件props(入口参数)上
- 异同点
| 函数名称 | 官方描述 | 个人理解 |
|---|---|---|
| mapStateToProps | 建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系 | 将Store上的State挂载到props上 (实现了单向数据流) |
| mapDispatchToProps | 建立 UI 组件的参数到store.dispatch方法的映射 | 将Store上的Dispatch函数挂载到(调用的时候，相当于是在触发Store上的函数) |
实例
(此处引用阮一峰老师提供的“计数器”代码，作为本文章的例子，感谢阮老师的分享🙏)
初始化环境
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
创建计数器组件
class Counter extends Component {
// 创建渲染器
render() {
// 从入口参数上获取mapState和mapDispatch挂载的属性和方法
const { value, onIncreaseClick } = this.props
// 返回JSX
return (
<div>
<span>{value}</span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
创建Action
Action说明了Redux中可以做什么动作。
const increaseAction = { type: 'increase' }
有点类似于Java中的抽象类的概念
创建Reducer
Reducer说明了Action做什么动作。
function counter(state = { count: 0 }, action) {
// 读取Redux中管理的count变量
const count = state.count
// 检测dispatch触发了哪一个动作
switch (action.type) {
// 触发"增加"动作
case 'increase':
// 将值+1并返回一个state到Redux的Store中
return { count: count + 1 }
default:
return state
}
}
有点类似于Java中的实现类
PS:
Action和Reducer的关系，在我看来有点类似于抽象实现的关系，不知道🤷♂️对不对，以后再继续深入探究一下。
创建Store
const store = createStore(counter)
实现挂载函数
// Redux的角度: 将Redux管理的全局State(Store)上的值挂载到了组件上
// 组件的角度: 获取(订阅)了Redux管理的全局State(Store)上的值
function mapStateToProps(state) {
return {
value: state.count
}
}
// Redux的角度: 将操作全局State(Store)上的方法挂载到了组件上
// 组件的角度: 获取了管理的全局State(Store)的方法
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction)
}
}
挂载到组件上
// Connected Component
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
页面渲染
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
流程图例
- 通过
mapStateToProps将全局State挂载到了组件的Props上，组件因此可以直接读取到Store中管理的state值。 - 通过
mapDispatchToProps将管理全局State的方法挂载到了组件的Props上，组件就可以从入参中获取操作方法，进而在组件中dispatch(触发)State中的Reducer进而修改State中的值。
结尾
这篇文章主要是梳理了一下本周解决的一个知识点，加深自私点在脑海中的印象。文章中阐述不清楚的点，欢迎透过邮箱📮与发起讨论，希望透过讨论也能让你明白这个过程发生了什么。
延伸资料
- React-Redux 的用法(中文)
- 使用mapStateToProps导出数据(官方英文)
- 使用mapDispatchToProps触发Actions(官方英文)
- 计算器代码(Github)PS:建议可以先不看🙈这两个函数入参的描述，因为很容易把人搞晕😵，可以着重看看[1]中，阮一峰老师提供的实例，搭配[2] [3]思考🤔一下，相信你很快也能get到这个函数在干什么，有什么用🤷♂️。