oliver1204/redux

学习react的相关知识。

redux

学习redux的相关知识。

redux's Issues

redux 之 reducer 知识点

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

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

state

1. 简单点来理解，state就是一个数据库。
2. 只读属性

• 单一数据源，state是程序的唯一数据源
• 确保视图和网络请求只能表现出我想要修改state，然后通过触发action修改
• 只有唯一更新state的方法，我们可以更容易的实现撤销/重做这类功能

3. 唯一能更新state的方法就是触发action，使用store的dispatch更新state

state 设计原则

开发复杂的应用时，不可避免会有一些数据相互引用。建议你尽可能地把 state 范式化，不存在嵌套。把所有数据放到一个对象里，每个数据以 ID 为主键，不同实体或列表间通过 ID 相互引用数据。把应用的 state 想像成数据库。

reducer设计原则

reducer 实际上是一个 assign 函数.

reducer设计原则 大家有没有想过，我为啥一定要用assign函数，写得又长又难看，要更新todos直接push不就得了... 必须注意reducer设计是要遵循一定原则的，在这里我们就必须遵循使用纯函数来执行这条原则。

ps原则
一、单一数据源
二、state是只读的
三、使用纯函数来执行

reducer必须是个纯函数

纯函数是指不依赖于且不改变它作用域之外的变量状态的函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。

var xs = [1,2,3,4,5];

// 纯的
xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]


// 不纯的
xs.splice(0,3);
//=> [1,2,3]

xs.splice(0,3);
//=> [4,5]

xs.splice(0,3);
//=> []

// 不纯的
var minimum = 21;

var checkAge = function(age) {
  return age >= minimum;
};


// 纯的
var checkAge = function(age) {
  var minimum = 21;
  return age >= minimum;
};

这种依赖状态是影响系统复杂度的罪魁祸首。

redux 之 connect

connect(mapStateToProps, mapDispatchToProps) （component）     

connect 是 react-redux 提供的一个方法，将傻瓜组件和容器组件相连接。接受的参数是 mapStateToProps 和 mapDispatchToProps， 执行结果依然是一个函数。所以后面才又加一个括号，参数为一个傻瓜组件，最后生成一个容器组件。

connect 的主要作用：

• 把store上的状态转化为内层「傻瓜组件」的props
• 把内层「傻瓜组件」中用户动作转化为派给store的动作。
  这两个任务一个是内层傻瓜对象的输入，一个是内层傻瓜对象的输出。

redux 之 Store 知识点

1. 什么是store

store是用来维持应用所有state的的一个对象，也可以说是一个方法的集合.

2. 创建store

要创建store只需要将根reducer作为参数传递给createStore函数。

var store = createStore(todoApp);

3.store的方法

1. getState：获取到当前的state
2. dispatch： 他就是我们反复强调的唯一的能改变state的那个函数。
3. subscribe： 添加一个变化监听器，当dispatch action时他就会执行，我们可以在回调函数中使用getState函数，查看当前的state，在上一小节中我们还能看到，subscribe函数会返回一个解除监听的函数
4. replaceReducer： 替换当前用来计算的reducer

redux 之 PropTypes 进行类型检查

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // 你可以将属性声明为以下 JS 原生类型
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 任何可被渲染的元素（包括数字、字符串、子元素或数组）。
  optionalNode: PropTypes.node,

  // 一个 React 元素
  optionalElement: PropTypes.element,

  // 你也可以声明属性为某个类的实例，这里使用 JS 的
  // instanceof 操作符实现。
  optionalMessage: PropTypes.instanceOf(Message),

  // 你也可以限制你的属性值是某个特定值之一
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 限制它为列举类型之一的对象
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 一个指定元素类型的数组
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 一个指定类型的对象
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 一个指定属性及其类型的对象
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // 你也可以在任何 PropTypes 属性后面加上 `isRequired` 
  // 后缀，这样如果这个属性父组件没有提供时，会打印警告信息
  requiredFunc: PropTypes.func.isRequired,

  // 任意类型的数据
  requiredAny: PropTypes.any.isRequired,

  // 你也可以指定一个自定义验证器。它应该在验证失败时返回
  // 一个 Error 对象而不是 `console.warn` 或抛出异常。
  // 不过在 `oneOfType` 中它不起作用。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // 不过你可以提供一个自定义的 `arrayOf` 或 `objectOf` 
  // 验证器，它应该在验证失败时返回一个 Error 对象。 它被用
  // 于验证数组或对象的每个值。验证器前两个参数的第一个是数组
  // 或对象本身，第二个是它们对应的键。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};