react-redux初探理解

ziwenxie 发布于2019-08-22 16:47 / 1724人阅读

摘要：它的作用就是像它的名字那样，建立一个从外部的对象到组件的对象的映射关系。比如表示从整个的表示当前组件容器的用来建立组件的参数到方法的映射比如表示它定义了哪些用户的操作应该当作，传给。

最近做的项目加入了react-redux,对react-redux一直没理解透彻，最近有时间把react-redux梳理了一番，希望能够帮助到大家，

首先有这几个文件，action,reducer,sage,组件，这几个文件组成,下面来一一说说

Reducer==>纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作,比如：

import * as Act from "actions";

const initState = {

}

export default function keepplan(state = initState, action) {
  switch(action.type) {
    // case Act.SET_USER_LIST:
    //     return Object.assign({}, state, {
    //         user_list: action.user_list
    //     });
    default:
      return state;
  }
}

Action==>存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。比如：

export const KEEP_PLAN_COMMON_METHOD = "keep_plan_common_method";

sage==>是处理异步的一个action，使用的是Generator，里面封装了一些方法，比如：

takeEvery(pattern, saga, ...args) //在发起的 action 与 pattern 匹配时派生指定的 saga
takeLatest(pattern, saga, ..args) //只执行最后一次saga任务，前面的都取消
take(pattern)
put(action)  //执行dispatch
call(fn, ...args) //执行异步函数
call([context, fn], ...args) //执行异步函数
apply(context, fn, args) //执行异步函数
cps(fn, ...args)
cps([context, fn], ...args)
fork(fn, ...args)
fork([context, fn], ...args)
join(task)
cancel(task)
select(selector, ...args)

sage只是返回了一个异步操作，然后一个回调如果想把值传到state中，
需要调用yield put 再执行一个dispatch,然后执行reducer里面的操作，在reducer里面再执行
return Object.assign({}, state, {...action.params});

mapStateToProps是一个函数。它的作用就是像它的名字那样，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。比如：

state表示从整个state的
ownProps表示当前组件容器的props
mapStateToProps=(state,ownProps)=>{
    return {
        types: state.types,
    }
}

mapDispatchToProps 用来建立 UI 组件的参数到store.dispatch方法的映射,比如：

dispatch表示它定义了哪些用户的操作应该当作 Action，传给 Store。
ownProps表示当前组件容器的props
function mapDispatchToProps(dispatch,ownProps){
    return {
        onClick: () => {
            dispatch({
                type: "SET_VISIBILITY_FILTER",
                filter: ownProps.filter
            });
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Home);

每天进步一点，希望大家喜欢，也希望喜欢的朋友点个赞，后续继续更新...

云服务器专线服务 react-redux 初探webrtc webrtc技术初探初探腾讯云存储网关

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

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

Redux-saga 初探

摘要：背景项目用的是全家桶，之前有同事用改进了一波，一直都没去研究。这次的打算写一个输入框，输入拼音会返回对应的城市列表。背景项目用的是react全家桶，之前有同事用redux-saga 改进了一波，一直都没去研究。前几天趁有空，也去学习了下，写了个简单的demo练练手，在这里简单分享一下。这次的demo打算写一个输入框，输入拼音会返回对应的城市列表。并尽可能多的使用redu...

yuanxin 2019-08-22 18:28 评论0 收藏0
快速理解react-redux

摘要：和的结合简述相信很多前端开发者都听说或使用过，我曾写过一篇关于快速理解的文章，虽说是快速理解，但实际上更应该叫做复习吧。它通过高阶函数，纯函数使我们在编写组件时完全不用接触相关内容，只通过将组件和数据连接起来即可。 react-redux react和redux的结合简述相信很多前端开发者都听说或使用过react-redux，我曾写过一篇关于快速理解redux的文章，虽说是快...

MoAir 2019-08-23 14:11 评论0 收藏0
对React-redux中connect方法的理解

摘要：应用中唯一的状态应用的子组件例子方法来看下函数到底是如何将和组件联系在一起的，注意到文档中有这样的一句话并不会改变它连接的组件，而是提供一个经过包裹的组件。关于React-redux Redux是React全家桶的重要一员，之前在知乎上也看到类似的提问：该如何通俗易懂的理解Redux? Redux是JavaScript的状态容器，Redux的概念简单明了： 1. 应用中所有的状...

Bryan 2019-08-20 18:25 评论0 收藏0
对redux和react-redux的理解和总结（一）

摘要：使得在变化和异步中可预测。它是数据的唯一来源。指定了应用状态的变化如何响应并发送到的，只是描述了有事情发生了这一事实，并没有描述应用如何更新。更新的函数称为，它是一个纯函数，接受旧的和，返回新的。是和之间的桥梁，是把它们联系到一起的对象。为什么使用redux 随着前端单页面开发越来越复杂，javascript需要管理越来越多的状态state。如果一个model的变化引起另一个mode...

skinner 2019-08-22 18:19 评论0 收藏0
React-redux基础

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

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