We will learn how to normalize the state shape to ensure data consistency that is important in real-world applications. We currently represent the todos in the state free as an array of todo object. However, in the real app, we probably have more tha…

React的数据模型分为共有数据和私有数据,共有数据可以在组件间进行传递,私有数据为当前组件私有.共有数据在React中使用props对象来调用,它包含标签所有的属性名称和属性值,props对象有三个特性,单向流动性.显示传递性和只读性.单向流动性是指React的数据只能由父组件传递到子组件,而不能由子组件传递到父组件:显示传递性是指必须明确地在子组件中通过属性赋值,数据才可以传递到子组件:只读性是指props数据是只读的,数据修改后并未改变原始的数据模型,而是会新生成一份数据模型,并将新的数据…

We will learn how to use store.subscribe() to efficiently persist some of the app’s state to localStorage and restore it after a refresh. To save data in to localStroge,  we first create a localStorgejs file and two methods, one for get and one for s…

With a well defined demarcation point between Redux and our State ADT based model, hooking up to a Redux store is no different than any other Redux based implementation. Once we have all of our transitions represented in dispatchable actions, we can…

所谓状态机,是一种抽象的数据模型,是“事物发展的趋势”,其原理是事件驱动.广泛地讲,世界万物都是状态机. 一.状态机是一种抽象的数据模型 在react中,props和state都可以用来传递数据.这里作一下区分. 1.props props用于组件间的数据传递.其本身只是一个属性,不是一个状态机. 从子组件的角度看,子组件无法擅自修改父组件通过属性传递的数据,因此具有单向数据流的特点. 2.state state用于设置组件本身的状态.state用于用户数据交互.事件监听. setState会调…

使用了redux管理应用的状态,应用的状态不应该全部放在Store里面. 前端状态主要有一下两种: 1. Domain data 2. UI State 1. Domain data 来自于服务端对领域模型的抽象,比如user,product,这个应该放在Store,方便更新data 2. UI State 大部分的UI State不应该放在Store中,应该使用组件私有state. 1. UI层面的toggle状态 主要包括 组件的显示隐藏,按钮的disable,列表的折叠展开等 2. 表单中…

We will learn how to encapsulate the knowledge about the state shape in the reducer files, so that the components don’t have to rely on it. In current VisibleTodoList.js: import { connect } from 'react-redux'; import { withRouter } from 'react-router…

前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富,过多的状态变得难以控制,以至于当不同的组件中触发了同一个状态的修改或者引发了视图的更新,我们可能搞不清楚到底发生了什么,state 的变化已经变得有些难以预测和不受控制,因此 Redux 应运而生,通过对 Flux 思想的实践和增强,对状态更新发生的时间和方式进行限制,Redux 试图让 state…

一. redux出现的动机 1. Javascript 需要管理比任何时候都要多的state2. state 在什么时候,由于什么原因,如何变化已然不受控制.3. 来自前端开发领域的新需求4. 我们总是将两个难以理清的概念混淆在一起:变化和异步.5. Redux 视图让state 的变化变得可预测. 二. 核心概念 1. 想要更新state中的数据,你需要发起一个action,Action就是一个普通的JavaScript 对象用来描述发生了什么.为了把actin 和state串起来开发一些函数…

Root Smart component can be overloaded, divide 'smart' component wisely & using Provider. Problem: Something the root component can be overloaded, means it handle too many application logics. For a larger application, it will be hard to maintain. Sol…