React , Redux 与 依赖注入

React , Redux 与 依赖注入

最近在学习 TypeScript , 顿时有一种写 Java 代码的感觉. TypeScript 将 强类型 和 完整的面向对象概念, 赋予了JS.

能够实现更加 OOP 的编写前端代码. 最近看到 TypeScript 的 注解 和 装饰器 两个概念.

有过面向对象的开发人员很多人都应该知道 IoC.

控制反转(IoC) 通过把创建对象的权利交给框架, 实现代码的解耦.

在 React 技术栈里面. Redux 是最著名的实现 flux 架构的状态容器. 在 Redux 架构里, React组件常常被分为两种: 展示型组件 和 容器型组件.



展示型组件 只提供与UI相关的显示功能.不涉及到 业务逻辑 和 Redux状态 ,更加具有通用性.

容器型组件 设计到业务逻辑和Redux的状态,具有特定性.

Redux的作者提供了一个 React-Redux 的框架库, 用于衔接 React 与 Redux.

React-Redux 通过 Provider 组件提供全局的 Redux 状态.

React-Redux 通过 connect 高阶函数 衔接 React 展示组件, 使之成为容器型组件. 这也就是说, 在 Redux 架构下的最佳实践中, 非 connect 衔接的 React 组件 都应该是 展示型子组件.

在 React-Redux 中, 使用 connect 传递 dispatch 和 state 给 展示型组件, 返回一个新的 容器型组件. 在基于类面向对象的编程里, 可以 将类比为 connect 为一个依赖注入的方法. 向展示型组件里, 注入 dispatch 和 state 到 对应的 属性.

将React组件看成一个函数

在 redux 架构下, 常见的 容器型组件 写法:

import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
// 获取 actions
import {
updateAge,
} from './ComponentDemoActions'

class ComponentDemo extends Component {

handleBtnClick() {
const { handleBtnClick } = this.props
handleBtnClick()

render() {
const {
name,
age,
} = this.props

return (
<div>
<div>{`my name is ${name} and my age is ${age}`}</div>
<div>
<button onClick={this.handleBtnClick}>updateAge</button>
</div>
)
}
}

const mapStateToProps = (state, ownerProps) => {
return {
name: state.name,
age: state.age,
}
}

const mapDispatchToProps = (dispatch, ownerProps) => {
return bindActionCreators({
updateAge,
}, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ComponentDemo)

将React组件看成一个类

通过类装饰器可以在原来的基础上返回一个新类, 可以将 connect 看成类装饰器,借助于装饰器实现的 容器组件的写法:

import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
// 获取 actions
import {
updateAge,
} from './ComponentDemoActions'

@connect(
state => ({
name: state.name,
age: state.age,
}),
dispatch => bindActionCreators({
updateAge,
}, dispatch)
)
class ComponentDemo extends Component {

handleBtnClick() {
const { handleBtnClick } = this.props
handleBtnClick()

render() {
const {
name,
age,
} = this.props

return (
<div>
<div>{`my name is ${name} and my age is ${age}`}</div>
<div>
<button onClick={this.handleBtnClick}>updateAge</button>
</div>
)
}
}

export default ComponentDemo

以上两种 connect 的使用 分别是基于 高级函数 与 基于类的依赖注入, 本人更加倾向于喜欢使用后者, 在使用上感觉更加简洁, 个人才疏学浅, 纯粹抛装引玉, 欢迎各位指点.