zoukankan      html  css  js  c++  java
  • React-Redux API 简介

    功能摘要

    1. React-Redux 是为了方便在 React 项目中使用 Redux 所封装的库
    2. React-Redux 把组件分为两类:UI 组件(Component)和容器组件(Container)
    3. React-Redux 提供 Provider 组件,可以让容器组件拿到 state

    UI 组件(纯组件)

    UI 组件特征:

    1. 只负责 UI 的呈现,不带有任何业务逻辑
    2. 没有状态(this.state)
    3. 所有数据都由组件属性(this.props)提供
    4. 不使用任何 Redux 的 API

    UI 组件示例:

    const Title = value => <h1>{value}</h1>;


    容器组件(逻辑组件)

    容器组件特征:

    1. 负责管理数据和业务逻辑,不负责 UI 的呈现
    2. 带有内部状态
    3. 通过 Redux 的 API 生成

    混合组件(UI + 逻辑)

    如果一个组件既有 UI 呈现又有业务逻辑,则将它封装为如下结构:

    1. 外面是一个容器组件,里面包裹一个UI 组件
    2. 容器组件负责与外部的通信,将数据传给 UI 组件
    3. UI 组件接受数据,并渲染出视图


    React-Redux API

    由 UI 组件生成容器组件,需要三个要素:

    1. 连接通信 - 连接 UI 组件和容器组件,为输入输出 state 做准备
    2. 逻辑输入 - 将容器组件的 state 映射为 UI 组件的 props
    3. 逻辑输出 - 用户动作触发 UI 组件绑定事件,dispatch 更新容器组件 state

    容器组件的三要素对应 React-Redux 的 API:

    1. 连接通信 - connect
    2. 逻辑输入 - mapStateToProps
    3. 逻辑输出 - mapDispatchToProps

    其中,mapStateToProps 和 mapDispatchToProps 作为 connect 的参数传入

    1. connect() 示例:

    import {connect} from 'react-redux';
    
    const Container = connect(
        mapStateToProps,
        mapDispatchToProps
    )(Component);

    2. mapStateToProps() 示例:

    const mapStateToProps = (state, ownProps) => {
        return props;
    }


    mapStateToProps 会订阅 Store,每当 state 更新,就会自动执行,重新计算 UI 组件的 props,从而触发 UI 组件的重新渲染

    3. mapDispatchToProps 示例:

    3.1 mapDispatchToProps 函数:

    const mapDispatchToProps = (dispatch, ownProps) => {
        return {
            onClick: () => {
                dispatch(action);
            }
        };
    };

    3.2 mapDispatchToProps 对象:

    const mapDispatchToProps = {
        onClick: actionCreator;
    };

    mapDispatchToProps 用来建立 UI 组件的 props 到 Store.dispatch 方法的映射


    至此,容器组件与内部的 UI 组件的通信已经解决。容器组件还需要与外部通信,拿到 state 对象。
    React-Redux 提供 Provider 组件,可以让容器组件拿到 state。

    4. Provider 示例:

    import {Provider} from 'react-redux';
    import {createStore} from 'redux';
    import todoApp from './reducers';
    import App from './components/App';
    
    const store = createStore(todoApp);
    
    render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('root')
    )


    Provider 在【根组件】App 外面包了一层。这样,所有子组件就可以拿到 state 了

    React-Redux 综合实例:

    实现步骤:

    1. 定义 UI 组件。规划组件属性 this.props,组件属性包括【展示属性】和【绑定事件】
    2. 定义组件通信。包括【展示数据】到 state 的映射、【绑定事件】到 dispatch 的映射
    3. 将 UI 组件包装成容器组件
    4. 定义容器组件的 Reducer
    5. 生成 Store 对象,并使用 Provider 在根组件外面包一层

    流程概括如下:

     Component 
            - [mapDispatchToProps/mapDispatchToProps] -
         => Container
             - [connect] -
             - [Reducer] -
         => Store + Provider


    Tips: 本文总结自阮一峰老师的文章 React-Redux 的用法,如果对您有帮助,可以给阮一峰老师留言感谢 !
    作者: 王益达 
    链接:https://www.imooc.com/article/19741
    来源:慕课网

  • 相关阅读:
    VOA 2009/11/02 DEVELOPMENT REPORT In Kenya, a Better Life Through Mobile Money
    2009.11.26教育报道在美留学生数量创历史新高
    Java中如何实现Tree的数据结构算法
    The Python Tutorial
    VOA HEALTH REPORT Debate Over New Guidelines for Breast Cancer Screening
    VOA ECONOMICS REPORT Nearly Half of US Jobs Now Held by Women
    VOA ECONOMICS REPORT Junior Achievement Marks 90 Years of Business Education
    VOA 2009/11/07 IN THE NEWS A Second Term for Karzai; US Jobless Rate at 10.2%
    Ant入门
    Python 与系统管理
  • 原文地址:https://www.cnblogs.com/vali/p/8628631.html
Copyright © 2011-2022 走看看