React-Redux的用法

leap_frog 发布于2019-08-20 18:19 / 2090人阅读

摘要：基本流程组件只接受数据包括出来的数据以及方法容器组件通过将返回的作为传入通过将作为传入通过方法将这两个方法与组件连接起来返回一个容器组件组件将所有组件分成两大类组件和容器组件组件有以下几个特征只负责的呈现不带有任何业务逻辑没有状态即不

基本流程

1.UI组件Example,只接受this.props数据,包括reducer出来的数据state,
以及dispatch方法.
2.容器组件
const store = createStore(reducer);
通过mapStateToProps将reducer返回的state作为this.props传入.
通过mapDispatchToProps将action作为this.props传入.
通过connect方法将这两个方法与Example组件连接起来,返回一个容器组件.

import React, { Component } from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";
import reducer from "../reducers/reducer6.js";
import { addAction, delAction } from "../actions/action2.js";
import Example from "../components/Example5.js";

const store = createStore(reducer);

function mapStateToProps(state) {
    return {
        count: state.count
    };
}

function mapDispatchToprops(dispatch) {
    return {
        add: () => dispatch(addAction()),
        del: () => dispatch(delAction())
    };
}

const App = connect(mapStateToProps, mapDispatchToprops)(Example)

render(
    
        
    ,
    document.getElementById("root")
);

import React, { Component } from "react";

class Example extends Component {
    render() {
        const { count, add, del } = this.props;

        return (
            
                count: { count }
                
                
            
        );
    }
}

export default Example;

UI组件

1.React-Redux将所有组件分成两大类:UI组件和容器组件.
2.UI组件有以下几个特征:

import React, { Component } from "react";

class Counter extends Component {
    render() {
        const { value, onIncreaseClick } = this.props;

        return (
            
                { value }
                
            
        );
    }
}

export default Counter;

1.只负责UI的呈现,不带有任何业务逻辑
2.没有状态(即不使用this.state这个变量)
3.所有数据都由参数(this.props)提供
4.不适用任何redux的API

因为不含有状态,UI组件又被称为"纯组件",即它跟纯函数一样,纯粹由参数决定它的值.

容器组件

// Action
const increaseAction = {
    type: "increase"
};

// Reducer
function counter(state = { count: 0 }, action) {
    const count = state.count;
    switch (action.type) {
        case "increase":
            return {
                count: count + 1
            }
        default:
            return state;
    }
}

// Store
const store = createStore(counter);

// Map Redux state to component props
function mapStateToProps(state) {
    return {
        value: state.count
    };
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
    return {
        onIncreaseClick: () => dispatch(increaseAction)
    };
}

// Connected Component
const App = connect(mapStateToProps, mapDispatchToProps)(Counter);

容器组件的特征恰恰相反

1.负责管理数据和业务逻辑,不负责UI的呈现
2.带有内部状态
3.使用redux的API

UI组件负责UI的呈现,容器组件负责管理数据和逻辑.
react-redux规定,所有的UI组件都由用户提供,容器组件则是由react-redux自动生成,也就是说,
用户负责视觉层,状态管理则是全部交给它.

connect()

react-redux提供connect方法,用于从UI组件生成容器组件.
connect的意思,就是将这两种组件连起来.
const App = connect(mapStateToProps, mapDispatchToProps)(Counter);
Counter是UI组件,App就是由React-Redux通过connect方法自动生成的容器组件.
但是,因为没有定义业务逻辑,上面这个容器组件毫无意义,只是Ui组件的一个单纯的包装层.
为了定义业务逻辑,需要给出下面两方面的信息.

1.输入逻辑:外部的数据(即state对象)如何转化为UI组件的参数.
2.输出逻辑:用户发出的动作如何变为Action对象,从UI组件传出去

connect方法接受两个参数:mapStateToProps和mapDispatchToProps,他们定义了UI组件的业务逻辑,
前者负责输入逻辑,即将state映射到Ui组件的参数(props),后者负责输出逻辑,即将用户对UI组件的操作映射成Action.

mapStateToProps()

mapStateToProps是一个函数,它的作用就是像它的名字那样,建立一个从(外部的)state对象到(Ui组件的)props对象的映射关系.
作为函数,mapStateToProps执行后应该返回一个对象,里面的每一个键值对就是一个映射.
mapStateToProps会订阅store,每当state更新的时候,就会自动执行,重新计算UI组件的参数,从而
触发UI组件的重新渲染.
mapStateToProps的第一个参数是state对象.

mapDispatchToProps

mapDispatchToProps是connect函数的第二个参数,用来建立UI组件的参数到store.dispatch方法的映射,
也就是说,他定义了哪些用户的操作应该当作Action,传给Store,它可以是一个函数,也可以是一个对象.
如果mapDispatchToProps是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数.
作为函数,应该返回一个对象,该对象的每个键值对都是一个映射,定义了UI组件的参数怎样发出Action.

组件

connect方法生成容器组件以后,需要让容器组件拿到state对象,才能生成UI组件的参数.
react-redux提供Provider组件,可以让容器组件拿到state.
Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了.
它的原理是React组件的context属性.
react-redux自动生成的容器组件的代码,就类似上面这样,从而拿到store.

render(
    
        
    ,
    document.getElementById("root")
);

React-Router路由库

使用React-Router的项目,与其他项目也没有不同之处,也是使用Provider在Router外面包一层,毕竟Provider的唯一功能就是传入store对象.

const root = ({ store }) => (
    
        
            
        
    
);

私有云混合云 react-redux 的用法 cdn的用法 find的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84334.html

react-redux用法及源码解读

摘要：带有内部状态，内部可以使用。代表监听的全局，也可以说是全局的，表示该组件自身携带的方法。回答问题是通过应用的，将通过顶层组件传递到上下文环境中。所有页面集合缓存不用每次都重新加载通过绑定用法完参考文章 react-redux把组件分为UI组件和容器组件。先看图下图： showImg(https://segmentfault.com/img/bVbkVBz?w=1378&h=1194);...

Zoom 2019-08-23 14:00 评论0 收藏0
一篇文章总结redux、react-redux、redux-saga

摘要：编辑器顶层组件不就了吗这就是。官方提供的绑定库。具有高效且灵活的特性。在的中，可以使用或者等来监听某个，当某个触发后，可以使用发起异步操作，操作完成后使用函数触发，同步更新，从而完成整个的更新。不就ok了吗？这就是 react-redux。Redux 官方提供的 React 绑定库。具有高效且灵活的特性。 React Redux 将组件区分为容器组件和 UI 组件前者会处理逻辑...

April 2019-05-21 19:08 评论0 收藏0
关于React-redux的Provider, connect的解析

摘要：的实现原理作为一个通用的模块，主要还是用来应用项目中的变更通过做连接，可以在的项目中将两者结合的更好。上述便是两个核心的用法啦。如有不对，还请指正。 react-redux的实现原理： Redux作为一个通用的模块，主要还是用来应用项目中state的变更,通过react-redux做连接，可以在React+Redux的项目中将两者结合的更好。 React-redux是一个轻量级的封装库...

elva 2019-08-23 14:54 评论0 收藏0
带着问题看 react-redux 源码实现

摘要：更新类型及具体内容负责更新数据的具体逻辑。即根据当前及携带的信息合成新的数据。下面带着这些问题深入了解本质上也是高阶组件的一种实现。核心实现声明以被子组件获取。通过的实现，我们可以得到的重要性浅比较的实现由此可以看到的重要性。前言 Redux作为通用的状态管理器，可以搭配任意界面框架。所以并搭配react使用的话就要借助redux官方提供的React绑定库react-redux，以高效灵活的...

JellyBool 2019-05-22 18:00 评论0 收藏0
React-redux基础

摘要：简介创建的函数，返回一个对象，包含等方法合并多个中间件处理，在实际的前调用一系列中间件，类似于绑定和函数式编程中常见的方法，介绍官方提供的绑定库。前言在学习了React之后，紧跟着而来的就是Redux了~ 在系统性的学习一个东西的时候，了解其背景、设计以及解决了什么问题都是非常必要的。接下来记录的是，我个人在学习Redux时的一些杂七杂八~ Redux是什么通俗理解 h...

jsyzchen 2019-08-23 15:09 评论0 收藏0