前言

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。

首先明确一点的就是:

Redux并不是React必须的,也没有任何依赖,你可以很自由的将他应用到各种前端框架、jQuery、原生JS中,它只是一个数据流管理工具。

了解一下React的数据流:

  • React推崇的是单向数据流,自上而下进行数据传递。
  • 父组件可以通过Props将数据传给子组件。
  • 子组件可以通过回调函数来将数据传递到父组件。
  • 多级嵌套组件可以通过getChildContext来传递,这样避免的使用props来进行多级传递,需要接受数据的子组件通过this.context可以获取到

下面一张图可能会比较清楚直观:

Redux的基本原则

       1.唯一数据源 应用的状态数据应该只存储在唯一的一个Store上,即 State 树。
       2.保存状态只读 不能直接修改state的值,必须通过派发action对象完成。通过getState()获取值
       3.数据改变只能通过纯函数 这里的纯函数就是reducer,函数的返回结果必须有两个参数stateaction决定

store

Redux 应用只有一个单一的 store (不同于Flux)。它是数据管理中心。

action

action 是一个带有type的对象,dispatch一个action是改变state的唯一法门,代表着发生了一些事情。

reducer

是一个纯函数。

Action 只是描述了有事情发生了这一事实,并没有指明应用如何更新 state。而这正是 reducer 要做的事情。(preState,action)=> newState

永远不要在reducer里做这些操作

  • 修改传入参数;
  • 执行有副作用的操作,如 API 请求和路由跳转;
  • 调用非纯函数,如 Date.now() 或 Math.random()

根据业务逻辑可以分为很多个reducer,然后通过combineReducers将它们合并

const RootReducer = combineReducers({
movies,
books
})
  • getState() 获取store中当前的状态。
  • dispatch(action) 分发一个action,并返回这个action。这是唯一能改变store中数据的方式,且触发listener的调用
  • subscribe(listener) 注册一个监听者,它在store发生变化的时候被调用
  • replaceReducer(nextReducer) 更新当前store里的reducer,一般只会在开发模式中调用该方法。

这些步骤都需要自己写

所以通常只用Redux的话,开发流程应该是这个样子的: component --> dispatch(actionCreater) --> reducer --> subscribe --> getState --> component

这样自己写会有点那个啥麻烦,接下来介绍下使用React-Redux了

React-Redux

react-redux是redux为结合react使用而造出来的一个工具库。

类似的还有vue-redux、angular-redux.... 简单到只提供了一个APi:connect,一个组件:Provider。

connect将组件与redux关联起来,

1. Provider将store传给组件。

2.组件通过dispatch发出action,store根据action的type属性调用对应的reducer并传入state和这个action,

3.reducer对state进行处理并返回一个新的state放入store,

4.connect监听到store发生变化,调用setState更新组件,此时组件的props也就跟着变化。

将组件和redux关联起来需要mapStateToProps,mapDispatchToProps 这两个函数作为参数。

通俗来讲:

  • mapStateToProps 就是用来绑定数据的,也就是说store返给了你所有的state,你在这个函数中,挑出当前组件所需的返回出来就可以了。
  • mapDispatchToProps 就是用来绑定事件的,将你需要在组件中调用的方法,在这里挑选出来。大多是可以触发dispatch(action)的方法。

下面用到这个方法:

function mapStateToProps(state) {
const {homeList, uploadAvatar} = state;
return {
homeList: homeList.list,
uploadAvatar: uploadAvatar
};
} function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch),
}
} const homeList = connect(mapStateToProps, mapDispatchToProps)(Home)

用官方的图更加好理解:

这样我们会发现使用的React-Redux的开发流程是这样的: component --> actionCreator(data) --> reducer --> component
   中间省去的store的操作都不需要我们手动去写了,React-Redux帮我们去做,方便了开发

redux-thunk

怎么去进行ajax请求啊!?只简单说一下怎么在action中使用。

这要归功于redux允许我们扩展其中间件,

普通的action是一个带有type的对象,在中间件中扩展了redux-thunk之后,

其允许我们在actionsCreater中返回一个带有dispatch的function。 这样我们可以在异步代码中调用dispatch(action)来改变state

项目总结

redux其实就是这么一个过程:

1、设计State,这是最重要的一步,他决定了你的action和reducer怎么写。

2、先写内容组件component,这一部分只是UI展示,不负责数据交流。

3、根据State来写actionCreater,thunk和普通的action区分开,导出thunk。

4、根据State来写reducer,按照state和模块将reducer分开,最后使用combineReducers合成一个总的Reducer。

5、整合store,根据Reducer和中间件来生成store。 6、现在根据component来写container,这一部分只负责数据、状态。

比较Vue重点vuex 还是比较高级一点的,其实理解了也就那么回事,你也不要太注意怎么去理解怎么实现这个过程,

这也就是硬性的规定(就好比9年义务教育)...多撸几遍就知道了,哈哈哈,加油吧 少年

Redux 聊聊的更多相关文章

  1. 【原创】Redux 卍解

    Redux 卍解 Redux - Flux设计模式的又一种实现形式. 说起Flux,笔者之前,曾写过一篇<ReFlux细说>的文章,重点对比讲述了Flux的另外两种实现形式:『Facebo ...

  2. React Redux Sever Rendering实战

    # React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](ht ...

  3. 我的前端故事----关于redux的一些思考

    背景 我一个前端,今年第一份工作就是接手一个 APP 的开发...一个线下 BD 人员用的推广 APP,为了让我这个一天原生开发都没有学过的人能快速开发上线,于是乎就选择了 react-native ...

  4. [转]聊聊技术选型 - Angular2 vs Vue2

    转载:https://juejin.im/post/58cab85b44d9040069f38f7a "Come, and take choice of all my library, An ...

  5. Vuex、Flux、Redux、Redux-saga、Dva、MobX

    https://www.jqhtml.com/23003.html 这篇文章试着聊明白这一堆看起来挺复杂的东西.在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 Reac ...

  6. 理解Redux以及如何在项目中的使用

    今天我们来聊聊Redux,这篇文章是一个进阶的文章,建议大家先对redux的基础有一定的了解,在这里给大家推荐一下阮一峰老师的文章: http://www.ruanyifeng.com/blog/20 ...

  7. 聊聊技术选型 - Angular2 vs Vue2

    作者介绍:李旸,美团点评前端工程师,3 年 Web 前端开发经验,现在是美团点评点餐团队的一员. "Come, and take choice of all my library, And ...

  8. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  9. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

随机推荐

  1. LoadRunner 技巧之 检查点

    LoadRunner 技巧之 检查点 判断脚本是否执行成功是根据服务器返回的状态来确定的,如果服务器返回的HTTP状态为 200 OK ,那么VuGen 就认为脚本正确地运行了,并且是运行通过的.在绝 ...

  2. kendo Ui实现搜索选中建议 不改变输入框的值

    $("#SubjectFilter").kendoAutoComplete({ dataTextField: "patientCardNumber", temp ...

  3. CTF—WEB—sql注入之无过滤有回显最简单注入

    sql注入基础原理 一.Sql注入简介 Sql 注入攻击是通过将恶意的 Sql 查询或添加语句插入到应用的输入参数中,再在后台 Sql 服务器上解析执行进行的攻击,它目前黑客对数据库进行攻击的最常用手 ...

  4. 快速安装pycharm,最详细的pycharm安装图文教程

    大家都知道python的开发工具Pycharm吧,它是由JetBrains打造的一款Python IDE,它功能强大,已经是python开发者使用最多的编辑工具.首先,它支持多平台(Linux.WIn ...

  5. cocos2dx[3.2](7) 核心类Director/Scene/Layer/Sprite

    [核心类] 导演Director.场景Scene.布景层Layer.精灵Sprite的概念请移步: cocos2dx基础篇(2) 第一个程序 导演控制场景,场景控制图层,图层控制精灵,精灵控制动作. ...

  6. Linux (1)

    @https://blog.csdn.net/mayi_xiaochaun这人博客里有一系列linux教程 @linux中,文件名最前加/  比如 cd /usr/local是绝对路径 若#前显示当前 ...

  7. Flask的 sqlalchemy 操作要点

    1.filter和filter_by的区别 filter,使用复杂的过滤条件,一般用两个等号进行匹配 filter,使用简单的过滤条件,一般用一个等号进行匹配 Answer.query.filter( ...

  8. leveldb Arena

    背景我们都知道,对于一个高性能的服务器端程序来说,内存的使用非常重要.C++提供了new/delete来管理内存的申请和释放,但是对于小对象来说,直接使用new/delete代价比较大,要付出额外的空 ...

  9. abp.event.on与abp.event.off使用

    apb的全局事件 var eventName = "app.createOrEditFieldModalSaved"; var reloadPage = function () { ...

  10. Java基础(入门Java)

    今天是学习Java的第一天,为了保证在暑假里持续高效的学习,决定每周写一篇博客汇报总结当周进度,以此来督促自己不断的向更深更远的方向迈进.Java刚刚入门,看到的人若觉得某些地方不妥欢迎进行批评指导, ...