摘要：使得在变化和异步中可预测。它是数据的唯一来源。指定了应用状态的变化如何响应并发送到的，只是描述了有事情发生了这一事实，并没有描述应用如何更新。更新的函数称为，它是一个纯函数，接受旧的和，返回新的。是和之间的桥梁，是把它们联系到一起的对象。
为什么使用redux
随着前端单页面开发越来越复杂，javascript需要管理越来越多的状态state。如果一个model的变化引起另一个model的变化，view的变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。 当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。Redux使得state在变化和异步中可预测。
在使用redux的应用中，所有的stae都以一个对象树的形式存储在单一的store中，惟一改变 state 的办法是触发 action，action 如何改变 state 树，需要编写 reducers。
Action 把数据从应用传到 store 。它是 store 数据的唯一来源。通过 store.dispatch() 将 action 传到 store。
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。更新state的函数称为reducer，它是一个纯函数，接受旧的state和action，返回新的state。reducer必须是一个纯函数，不能进行如下操作：
修改传入的参数
执行有副作用的操作，如 API 请求和路由跳转
调用非纯函数，如 Date.now() 或 Math.random()
Redux提供了combineReducers函数，该函数接受一个对象，作用是生成一个函数，这个函数来调用你的一系列 reducer，每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理，然后这个生成的函数再将所有 reducer 的结果合并成一个大的对象。没有任何魔法。正如其他 reducers，如果 combineReducers() 中包含的所有 reducers 都没有更改 state，那么也就不会创建一个新的对象。
Store 是action和reader之间的桥梁，是把它们联系到一起的对象。Redux 应用只有一个单一的 store
Store有以下功能：
维持应用的state
提供 getState() 方法获取 state
提供 dispatch(action) 方法更新 state
通过 subscribe(listener) 注册监听器
通过 subscribe(listener) 返回的函数注销监听器
使用createStore创建一个Store
const Store = createStore(reducers,other)Redux的数据流
Redux是单向数据流。单向数据流的好处：意味着应用中所有的数据都遵循相同的生命周期，这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化，这样可以避免使用多个且独立的无法相互引用的重复数据。
调用 store.dispatch(action)，触发action动作
Redux store 调用传入的 reducer 函数，Store 会把两个参数传入 reducer： 当前的 state 树和 action。
根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
Redux store 保存了根 reducer 返回的完整 state 树
Redux搭配react使用使用react-redux。在react-redux的使用中，关注两个方法：Provider和connect
Provider把store放到context里，所有的子元素可以直接取到store，本质上 Provider 就是给 connect 提供 store 用的。
connect 是一个高阶组件，接受一个组件 WrappedComponent 作为参数，负责链接组件，把给到redux里的数据放到组件的属性里。主要有两个作用：1. 负责接受一个组件，把state里的一些数据放进去，返回一个组件；2. 数据变化的时候，能够通知组件。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95730.html
摘要：应用中唯一的状态应用的子组件例子方法来看下函数到底是如何将和组件联系在一起的，注意到文档中有这样的一句话并不会改变它连接的组件，而是提供一个经过包裹的组件。 关于React-redux Redux是React全家桶的重要一员，之前在知乎上也看到类似的提问：该如何通俗易懂的理解Redux? Redux是JavaScript的状态容器，Redux的概念简单明了： 1. 应用中所有的状...
摘要：和的结合简述相信很多前端开发者都听说或使用过，我曾写过一篇关于快速理解的文章，虽说是快速理解，但实际上更应该叫做复习吧。它通过高阶函数，纯函数使我们在编写组件时完全不用接触相关内容，只通过将组件和数据连接起来即可。 react-redux react和redux的结合 简述 相信很多前端开发者都听说或使用过react-redux，我曾写过一篇关于快速理解redux的文章，虽说是快...
摘要：编辑器顶层组件不就了吗这就是。官方提供的绑定库。具有高效且灵活的特性。在的中，可以使用或者等来监听某个，当某个触发后，可以使用发起异步操作，操作完成后使用函数触发，同步更新，从而完成整个的更新。 不就ok了吗？这就是 react-redux。Redux 官方提供的 React 绑定库。 具有高效且灵活的特性。 React Redux 将组件区分为 容器组件 和 UI 组件 前者会处理逻辑...
摘要：为了提高自己的学习效率，避免做一些无用的工作，我也决定以后无论是工作还是学习一定要养成定时总结的习惯，而且也要用文字记录下来，这样可以时常复习，理清逻辑，加深印象。一种解决方法是将对象作为参数，传入容器组件。 前言 最近一直在学习react技术栈，相关的理论和概念基本都了解了，之前也用reactjs写了几个demo，切身体会到了函数式编程和组件化开发的强大之处，但因各种主客观原因，事后...
手挽手带你学React入门四档,用人话教你react-redux，理解redux架构，以及运用在react中。学完这一章，你就可以开始自己的react项目了。 之前在思否看到过某个大神的redux搭建 忘记了大神的名字 这里只记得内容了 凭借记忆和当时的学习路线写下本文 隔空感谢 本人学习react-redux的时候遇到了很多坎，特别是不理解为什么这么用，这是什么东西，用来做什么。加上各种名词让人...
阅读 824·2019-08-30 15:54
阅读 3298·2019-08-29 15:33
阅读 2684·2019-08-29 13:48
阅读 1183·2019-08-26 18:26
阅读 3314·2019-08-26 13:55
阅读 1407·2019-08-26 10:45
阅读 1143·2019-08-26 10:19
阅读 285·2019-08-26 10:16
