redux

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

分为以下几步： 1、修改数据通过dispatch来修改 2、抽离store，数据抽象出来一个 createStore，它可以产生 store，里面包含 getState 和 dispatch 函数 3、观察者模式监控数据 4、共享结构对象提高性能 5、合并方法，stateChanger 为 reducer，定义了 reducer 只能是纯函数，功能就是负责初始 state，和根据 state 和 action 计算具有共享结构的新的 state 在开发过程中如果有共享状态可以被随意的修改是很危险的， 第一步 定义一个dispatch函数专门负责数据的修改，数据的修改都要经过这个dispatch函数 let appState = { title: { text: ‘React.js 小书’, color: ‘red’, }, content: { text: ‘React.js 小书内容’, color: ‘blue’ } } function dispatch (action) { switch (action.type) { case ‘UPDATE_TITLE_TEXT’: appState.title.text = action.text break case ‘UPDATE_TITLE_COLOR’: appState.title.color = action.color

我们要把 context 相关的代码从所有业务组件中清除出去，现在的代码里面还有一个地方是被污染的。那就是 src/index.js 里面的 Index ： ... class Index extends Component { static childContextTypes = { store: PropTypes.object } getChildContext () { return { store } } render () { return ( <div> <Header /> <Content /> </div> ) } } ... 其实它要用 context 就是因为要把 store 存放到里面，好让子组件 connect 的时候能够取到 store 。我们可以额外构建一个组件来做这种脏活，然后让这个组件成为组件树的根节点，那么它的子组件都可以获取到 context 了。 我们把这个组件叫 Provider ，因为它提供（provide）了 store ： 在 src/react-redux.js 新增代码： export class Provider extends Component { static propTypes = { store: PropTypes.object, children: PropTypes.any } static

如何在Flutter中实现Redux (Implementing Redux architecture with Flutter) 最近有机会做一个Flutter商业项目。之前也试过各种不同的Flutter架构，但这次我决定用Redux，因为觉得有趣而且有挑战性。 为了方便分享我的经验，我就以注册流程为例(Welcome-Signin-Signup)。 在继续阅读本文之前，请先了解一下： 关于Flux的理论知识，以及Redux框架。就是说，你应该明白什么是Store, 为什么说它是Single Source of Truth，什么是Reducer，为什么它被称为"Vanilla Function"，等等。。。 对redux和flutter_redux插件有基本的了解 我有四个页面： 欢迎页面 (Welcome) 登陆页面 (Sign-In) 首页 (Home) 注册页面 (Sign-Up) 首先，我要创建AppState, AppReducer和Store实体。这些实体是全局的，但同时State是不可改变的，意思就是说，任何变化发生，你都要重新创建它。 在我的实现中，AppState是担当页面模块States的载体： @immutable class AppState{ final AuthState authState; final SignInState signInState

1、redux中间件 答：中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。 常见的中间件： redux-logger：提供日志输出；redux-thunk：处理异步操作；redux-promise：处理异步操作；actionCreator的返回值是promise 2、redux有什么缺点 答：1.一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。 2.当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。 3、react组件的划分业务组件技术组件？ 答：根据组件的职责通常把组件分为UI组件和容器组件。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。两者通过React-Redux 提供connect方法联系起来。 4、react生命周期函数 答：一、初始化阶段： getDefaultProps:获取实例的默认属性 getInitialState:获取每个实例的初始化状态 componentWillMount

//组件使用redux的方法； import React, { Component } from 'react' import { connect } from 'react-redux'; class playBar extends Component { constructor(props) { super(props); //可以使用state中的数据和方法；放在props中 }; } } function mapStateToProps(state) {//数据 return { playList: state.songs.playList, }; } function mapDispatchToProps(dispatch) {//方法 return { autoChangeCurrentMusic(playList, index) { } }; } export default connect(mapStateToProps, mapDispatchToProps)(playBar);//connect 提供redux方法 import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { Provider }