redux中文文档

什么时候用？ 某个组件的状态，需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 你用react不能解决的组件通信，redux可以给你解决。 redux核心概念 store相当于一个应用的state，但是不可随意更改，必须通过action更改。 强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么。 为了把 action 和 state 串起来，开发一些函数，这就是 reducer。 reducer 只是一个接收 state 和 action，并返回新的 state 的函数。 这差不多就是 Redux 思想的全部。 redux流程 1.用户触发action store.dispatch(action); 2.Store 自动调用 Reducer(Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。)，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。 3.State 一旦有变化，Store 就会调用监听函数 store.subscribe(listener); listener可以通过store.getState()得到当前状态。 PS

connect ( [mapStateToProps ] , [mapDispatchToProps ] , [mergeProps ] , [options ] ) 连接 React 组件与 Redux store。 连接操作不会改变原来的组件类，反而 返回 一个新的已与 Redux store 连接的组件类。 参数 [ mapStateToProps (state , [ownProps ] ) : stateProps ] ( Function ): 如果定义该参数，组件将会监听 Redux store 的变化。任何时候，只要 Redux store 发生改变， mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象，这个对象会与组件的 props 合并。如果你省略了这个参数，你的组件将不会监听 Redux store。如果指定了该回调函数中的第二个参数 ownProps ，则该参数的值为传递到组件的 props，而且只要组件接收到新的 props， mapStateToProps 也会被调用。 [ mapDispatchToProps (dispatch , [ownProps ] ) : dispatchProps ] ( Object or Function ): 如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action

Tip 前端技术真是日新月异，搞完 React 不搭配个数据流都不好意思了。 满怀期待的心去翻了翻 flux，简直被官方那意识流的文档折服了，真是又臭又长还是我智商问题？😖 转战 redux ，越看越有意思，跟着文档做了个 TodoList 的入门小例子。 废话不多说，先贴上文章用到例子的源码 https://github.com/TongchengQiu/TodoList-as-redux-demo redux 的 Github 仓库 https://github.com/rackt/redux 还有个中文的 gitbook 翻译文档 http://camsong.github.io/redux-in-chinese/index.html advantage 随着spa（不是SPA，是单页应用）的发展，以 react 来说，组件化和状态机的思想真是解放了烦恼的 dom 操作，一切都为状态。state 来操纵 views 的变化。 然而，因为页面的组件化，导致每个组件都必须维护自身的一套状态，对于小型应用还好。 但是对于比较大的应用来说，过多的状态显得错综复杂，到最后难以维护，很难清晰地组织所有的状态，在多人开发中也是如此，导致经常会出现一些不明所以的变化，越到后面调试上也是越麻烦，很多时候 state 的变化已经不受控制。对于组件间通行、服务端渲染、路由跳转、更新调试

React的学习资源 github 地址： https://github.com/LeuisKen/react-collection https://github.com/reactnativecn/react-native-guide https://github.com/zhangmengxue/React-Learning https://github.com/react-guide 【高质量的 React 相关文档和翻译】 个人收集的react相关资源链接 链接 React 在 Coding WebIDE 中的应用实践 React 中文索引 搞定immutable.js Redux 中文文档 React Router Full-Stack Redux Tutorial 深度剖析：如何实现一个 Virtual DOM 算法 Webpack傻瓜指南（三）和React配合开发 webpack使用优化 解读redux工作原理 Redux系列 深入到源码：解读 redux 的设计思路与用法 React.js 2016 最佳实践 Airbnb React编码规范 Babel 入门教程 React 入门教程 [译]看这些文章，足够你学好redux react-webpack-cookbook 电子书 Hacking.with.React Introduction to React.pdf

简介 redux-saga 是用来管理应用程序副作用的库，可以认为，一个saga就像是应用程序中一个单独的线程，独自负责处理副作用。 redux-saga 是一个Redux中间件，也就意味着这个线程可以通过正常的Redux的Action从主应用启动暂停和取消，它能够访问完整的Redux的State，也可以进行 dispatch redux-saga 使用了 Generator ，让异步流程看起来像是同步代码，有更强大的异步流程控制能力。 Hello Saga 安装： npm install --save redux-saga # 或者 yarn add redux-saga 创建 sagas.js 文件，我们的异步逻辑都会包含在这个文件中： // sagas/index.js export default function* helloSaga() { console.log('Hello Sagas!'); } Redux-Saga是一个中间件，我们需要建立它与Redux Store的联系，在 store/configureStore.js 中对 store 进行配置，注入中间件： // store/configureStore.js import { createStore, applyMiddleware } from 'redux'; import rootReducer

学习Redux中间件的概念，以及使用Redux中间件完成异步操作的方法。 同步和异步流程 先来复习一下Redux的基本流程： 1234567 1. 用户发出Action2. Store自动调用Reducer，计算返回一个新的State3. Store就会调用监听函数4. 监听函数listener中重新渲染View 在第1、2步之间有一个问题，之前考虑的情况都是在Action发出之后，Reducer立刻计算出State，这是一个同步的过程。如果在Action发出之后，过一段时间再执行Reducer，这是异步过程： 123456789 1. 用户发出Action1.5 异步操作（等待一段时间）2. Store自动调用Reducer，计算返回一个新的State3. Store就会调用监听函数4. 监听函数listener中重新渲染View 现在我们希望的是在异步操作结束后，自动执行Reducer，这就要用到中间件（middleware） 中间件的概念 什么是中间件？中间件（middleware）是一种很常见、也很强大的模式，被广泛应用在Express、Koa、Redux等类库和框架当中。 简单来说，中间件就是在调用目标函数之前，可以随意插入其他函数预先对数据进行处理、过滤，在这个过程里面你可以打印数据、或者停止往下执行中间件等。数据就像水流一样经过中间件的层层的处理、过滤

2019年8月13日 星期二 本周计划 星期二 学习Redux入门教程（一），并运用到项目中。 星期三 学习Redux入门教程（二），并运用到项目中。 星期四 学习Redux入门教程（三），并运用到项目中。 星期五 星期六 星期日 学习Redux中文文档 来源： https://blog.csdn.net/boysky0015/article/details/99414623