React学习(八)：Redux基础

一 Action

1.Action

它是把数据从应用传到store的有效载荷，它是store数据的唯一来源，一般说来，view层的变化可以反映到Action上，然后通过store.dispatch()将action传到store，reducer在根据action和现有的state来更新状态。Action是一个js的普通对象，唯一的约束就是type属性。那么Action是由谁创造的呢？

2.Action Creator

Action创建函数就是生成Action的方法，返回值就是一个Action，

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

二 Reducer

1.Reducer

Action描述的是有事情发生，但是并没有指出如何更新state，这是通过Reducer来完成的。其实在每次dispatch（action）后就会触发reducer函数；它接收旧的state和action并根据action.type来更新state并返回nextState（这里是先复制一个state，然后在此基础上修改生成nextState）；使用返回的nextState完全替换掉当前的state。

2.纯净

Reducer纯净很重要，不要在Reducer里做如下操作：修改传入的参数；执行有副作用的操作，如API请求和路由跳转；调用非纯函数，如Date.now()或Math.random()；

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

3.注意

不要修改state，每次要复制state然后进行修改更新，可使用如map，filter等方法。

在default情况下返回旧的state。

三 store

1.store

Redux应用只有一个单一的store，其管理着唯一的应用状态state，state是不可以直接被修改的，只有通过dispatch一个action才可以进行修改。

2.职责：

维持应用的state；

提供getState()方法获取state； 

提供dispatch(action)方法更新state；

通过subscribe(listener)注册监听器；

通过subscribe(listener)返回的函数注销监听器。

3.createstore

createstore是用来生成store的，如：let store = createStore(todoApp, window.STATE_FROM_SERVER)；它接收两个参数，第一个为reducer，即监听到改变后就自动调用reducer，第二个参数是可选的, 用于设置 state 初始状态。这对开发同构应用时非常有用，服务器端 redux 应用的 state 结构可以与客户端保持一致, 那么客户端可以将从网络接收到的服务端 state 直接用于本地数据初始化。

四 数据流

Redux的生命周期遵循下面的四个步骤：

1.调用store.dispatch(action)

Action就是一个描述了发生了什么的对象。

2.Redux store 调用传入的 reducer 函数

store会把两个参数传入reducer：当前的state树和action，reducer以此进行更新状态。

3.根reducer返回唯一的state

Redux 原生提供combineReducers()辅助函数，来把根 reducer 拆分成多个函数，用于分别处理 state 树的一个分支，最终返回唯一的一个状态树。

4.store保存了根reducer返回的state树

这个新的树就是应用的下一个 state！所有订阅 store.subscribe(listener) 的监听器都将被调用；监听器里可以调用 store.getState() 获得当前 state。
现在，可以应用新的 state 来更新 UI。如果你使用了 React Redux 这类的绑定库，这时就应该调用 component.setState(newState) 来更新。