Redux 笔记

本文参考：http://www.jianshu.com/p/7a71181a7aa0

首先要引入 Redux

import { createStore } from 'redux';

Store

是redux提供的唯一数据源，它存储了整个应用的state，并且提供了获取state的方法，即store.getState()。

store是只读的。

redux没有提供直接修改数据的方法，改变 state 的唯一方法就是 触（dispatch）发 action 。

比如：

let store = createStore(counter); 
store.dispatch({ type: 'CHANGE', res: '911' });

Action

action 是一个用于描述已发生事件的普通对象。

即「你干了一件什么事」

但是单单讲了你干的事情，我们并不知道你干的这件事产生了什么牛逼效果，于是有了一个专门负责描述某个行动对应产生某种效果的机构，叫做 reducer 。

Reducer

reducer 只是一个接收 state 和 action，并返回新的 state 的函数

它根据你所做的事情，提供对应的后果，这个后果直接对数据源起作用。

它应尽可能覆盖所有的事件类型

一个例子：

function counter(state=0, action) {
    let {st} = action;

    switch (st) {
        case 'hehe':
            let ret = ++state;
            return ret;
        default:
            return state;
    }
}

---

以下是一个Store的state树：

// store.getState()
{
  card: {
    name: '王富贵',
    photo: 'Person_250.jpg'
  },
  dialog: {
    status: false
  }
}

---

action 本质上是一个普通的js对象，因为它只是一个用来描述事件的对象。
以下是两个现成的action：

{
  type: 'CHANGE_NAME',
  name: '琉璃殇·葬爱'
}

{
  type: 'CHANGE_PHOTO',
  photo: 'Person_438.jpg'
}

action 都会带一个type属性，这个属性是必选的，而其他的内容，比如name、picture等等，都是可选的，它们是由action携带，最后传递给reducer的内容，就好比我说我要改名字，这是事件，但是我没有说我要改成什么名字，这个操作就不完整，所以我还需要补充说，我要改名叫“葬爱”，因此我还需要提供一个name给你，这才能完整实现一个动作。这些附属的参数，我们称为 payload（载荷）。

payload 是可选的，也就是说，有些动作的触发是不需要其他信息的，比如“激活弹窗”、“关闭弹窗”等等，这类动作只需要一个 type 就可以传达：

{
  type: 'SHOW_DIALOG'
}

{
  type: 'CLOSE_DIALOG'
}

于是，一个完整的触发动作是这样的：

// 修改名字
dispatch({
  type: 'CHANGE_NAME',
  name: '琉璃殇·葬爱'
})

// 激活弹窗
dispatch({
  type: 'SHOW_DIALOG'
})

触发了动作，则需要接收并处理它，即补充一个 reducer。

---

reducer 是根据传入的各种action不同，相对应对state进行处理，最后返回一个新state的函数。
这个函数需要的参数至少是：当前的state，以及一个action。
以下是reducer：

function reducer(state, action) {
  switch (action.type) {
    case 'CHANGE_NAME':
    return {
      card: {
        name: action.name, // 使用action携带的新name
        photo: state.card.photo  // 不需要修改，使用旧state的值
      },
      dialog: state.dialog  // 不需要修改，使用旧state的值
    }
    
    case 'CHANGE_PHOTO':
    return {
      card: {
        name: state.card.name, // 不需要修改，使用旧state的值
        photo: action.photo  // 使用action携带的新photo
      },
      dialog: state.dialog  // 不需要修改，使用旧state的值
    }

    case 'SHOW_DIALOG':
    return {
      card: state.card,  // 不需要修改，使用旧state的值
      dialog: {
        status: true
      }
    }

    case 'CLOSE_DIALOG':
    return {
      card: state.card,  // 不需要修改，使用旧state的值
      dialog: {
        status: false
      }
    }

    default:
    return state  // 没有匹配的action type，返回原来的state
  }
}