Redux 介绍 （二）

Action

Action 是把数据从界面或者服务器端传到 store 的有效载荷。它是 store 数据的唯一来源。

{
  type: 'add',
  name: 'newItem'
}

Action 本质上是 JavaScript 普通对象。redux约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 action。

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。
reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。
在reducer 中不允许修改state，遇到未知的 action 时，一定要返回旧的 state

Store

Store 就是把action与reducer联系到一起的对象：
1. 维持应用的 state；
2. 提供 getState() 方法获取 state；
3. 提供 dispatch(action) 方法更新 state；
4. 通过 subscribe(listener) 注册监听器;
5. 通过 subscribe(listener)返回的函数注销监听器

import { createStore } from 'redux'
import addfrom './reducers'
let store = createStore(add)

通过createStore()函数并传入reducer创建

搭配React

react 搭配 redux 需要安装 react-redux

npm install --save react-redux

Provider

react 使用 redux，需要在根节点外用 provider 包裹住，确保内部组件可以调用 connect()方法。

该组件只有一个属性 store，用于存放当前应用所使用的store。

展示组件和容器组件

通常我们所使用的组件都是展示型组件，但是，当我们需要将组件与redux的store联系起来的时候，就需要生成容器组件来监听Redux state。
容器组件生成方式：
使用 React Redux 库的connect()方法来生成,redux对这个方法做了性能优化，来避免很多不必要的重复渲染，因而我们也不需要手动实现shouldComponentUpdate()方法进行性能优化。

import { connect } from 'react-redux'
import mycomponent from '../components/mycomponent'

const getVisibleTodos = (todos, filter) => {
      return {...}
}

const mapStateToProps = state => {
  return {
    ...
  }
}

const mapDispatchToProps = dispatch => {
  return {
    ...
  }
}

const mycomponent= connect(
  mapStateToProps,
  mapDispatchToProps
)(mycomponent)

export default mycomponent

这样是先后只有对应的store中的数据发生了变化，组件才会触发重绘。