react 和 redux(上)

作者: zidea | 来源:发表于2019-01-31 05:18 被阅读2次

react 侧重于 view,我们提到 react 就会想起 redux 这个状态管理库(工具),是的 react redux 和 rxjs 着三者结合使用 power 无比,看一看 netflix 是他们结合起来用的风生水起。我们今天介绍介绍一下这个精巧的 redux,第一次接触 redux 感觉不就是观察者模式的实现,学了学,用了用感觉没那么简单,我尝试解释一下吧。

一切从场景出发,这是一个很常见的场景,填写表单(一条待办),提交表单,然后在代办列表中多一条待办记录。这就是仅次于 helloworld 的 todoList 或事 todo app。

看一看我们使用 redux 是如何实现这个过程的。这里了解一下 redux 几个重要组成部分 action reducer store 吧

分析一下,填写完表单我们会单击【提交】按钮,这是我们 view 发出一个 action 这个 action 需要包含两个信息,第一个是触发什么事件,也就是事件类型(type),是提交事件呀还是渲染列表事件呀。第二个信息就是数据(payload),我们提交表单必定会有表单数据,就会触发(发出) action ,然后

Reducer (接受action)就是会根据 action 的类型(什么事件) 来更新 state ,他不是更改现有 state 而是将 state 复制出一份,然后这个state 上进行更改,返回一个新的版本的 state,State 更新了,store 就会更新视图,完成一次操作

上代码

定义一下 action 的 type(类型)就是 action 做了什么事,说明用户做了什么操作,这样做的好处不言而喻

然后我们定义 action 返回一个对象包含两个信息,一个就是这个动作做了什么,在 type 中定义,然后 payload 更新的数据

定义 action,我们就来创建一个 reducer 处理 action 根据 action的type进行不同的处理,然后更新 action 要更新的 state

最后创建我们 store store 需要 reducer 同样我们也可以添加一些中间件

相关文章

  • React-Redux源码剖析

    React-Redux是用在连接React和Redux上的。如果你想同时用这两个框架,那么React-Redux基...

  • React 生态之 Redux

    Redux 初体验 通常会将 Redux 和 React 联系到一起,但是 Redux 不是寄生于 React 上...

  • redux note(一)

    redux 搭配 React使用 Redux和React之间没有关系,Redux支持React, Angular,...

  • redux的简单应用

    1、安装 redux和react-redux: npm i redux react-redux --save-de...

  • react 学习

    包含 react基础 react传值 react路由 和redux管理 和react-redux reactDom...

  • react-redux源码解读

    "react-redux": "^5.0.6" redux和react之间的桥梁是react的context,re...

  • react 和 redux(上)

    react 侧重于 view,我们提到 react 就会想起 redux 这个状态管理库(工具),是的 react...

  • React(五)

    React-redux(三):connect和mapStateToProps React-redux(四):map...

  • react-redux性能优化之reselect

    在React-redux深入理解中,我们知道了 react-redux 是如何将 React 和 Redux 进行...

  • RN-Redux-Project-01

    React + Redux 搭建项目 1.项目搭建 ①新建项目 ②安装 redux 和 react-redux 2...

网友评论

    本文标题:react 和 redux(上)

    本文链接:https://www.haomeiwen.com/subject/oolfsqtx.html