Redux使用探究

Chao 发布于2019-08-22 10:39 / 826人阅读

摘要：动机如今用或者开发单页应用越来越普遍。可能散落在各处。使用纯函数来执行修改为了描述如何改变，你需要编写。在实际的项目中，你还需要使用绑定库如。

动机

如今用React或者vue开发单页应用越来越普遍。当项目越来越大，管理不断变化的state越来越困难。可能散落在各处。需要一个统一的容器来管理各种state。
Redux 是 JavaScript 状态容器。它和react和vue无直接关系。只是刚好两者可以结合起来发挥不错的。

三大原则

Redux 可以用这三个基本原则来描述：

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中

State 是只读的

惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务，如分页器。

API 文档

Redux 的 API 非常少。

记住，Redux 只关心如何管理 state。在实际的项目中，你还需要使用 UI 绑定库如 react-redux。实际上就是帮你处理了state变化时的监听

createStore

产生store

combineReducers

把多个小reducers组合成一个reducer

applyMiddleware(...middlewares)

action中间件

bindActionCreators

产生可以不用dispatch的action (感觉用处并不大)

compose

把多个中间件组合在一起

私有云 GPU服务器探究关于webrtc直播的探究 Redux redux源码

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

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

React技术栈实现XXX点评App demo

摘要：项目的架构也是最近在各种探讨研究。还求大神多指点项目技术总结技术栈项目结构探究初体验关于项目中的配置说明项目简单说明开发这一套，我个人的理解是体现的是代码分层职责分离的编程思想逻辑与视图严格区分。前端依旧使用技术栈完成。项目地址：https://github.com/Nealyang/R...技术栈：react、react-router4.x 、 react-redux 、 webp...

wslongchen 2019-08-21 16:24 评论0 收藏0
redux中间件探秘

摘要：接下来我们来看看源码中的模块是怎么应用中间件的。如何实现中间件操作的。新的会从第一个中间件开始触发，这样，在我们调用的时候，就会将中间件走一遍了。函数如果存在多个中间件，直接使用方法将各个中间件嵌套起来。从redux-thunk引出思考在使用redux-thunk进行异步action书写的时候，我经常好奇redux到底如何运作，让asyncAction成为可能为了探究，我们必须看...

Jeff 2019-08-20 18:26 评论0 收藏0
2017-06-27 前端日报

摘要：前端日报精选漫谈函数式编程一十年踪迹的博客前端每周清单的优势与劣势有望超越在嵌入式及物联网的应用现状进阶系列高阶组件详解一前端之路译如何充分利用控制台掘金程序猿升级攻略众成翻译中文译如何充分利用控制台掘金前端从强制开启压缩探 2017-06-27 前端日报精选漫谈 JS 函数式编程（一） - 十年踪迹的博客前端每周清单： Vue的优势与劣势；Node.js有望超越Java；JS在嵌...

Eidesen 2019-08-20 17:35 评论0 收藏0
解析Twitter前端架构学习复杂场景数据设计

摘要：总结本文分析了在采用架构下的数据设计结构，在一个复杂的场景下，希望引起读者对能有一个更深入的认识。前几天刷Twitter，发现Nicolas（Engineering at @twitter. Technical Lead for Twitter Lite）发布了这么一条推文： showImg(https://segmentfault.com/img/remote/1460000009...

csRyan 2019-08-20 16:08 评论0 收藏0