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