转载

Redux 学习笔记

Redux 是一个管理 state 的工具，它试图让 state 的变化变得可预测。

核心概念

我们使用普通的对象来描述应用的 state，当我们想要更新 state 的时候，需要发起一个 action。

action 其实也是一个普通对象，强制使用 action 来描述所有变化的好处是可以清晰地知道应用中到底发生了什么。

为了把 state 和 action 联系起来我们需要 reducer，reducer 是一个接受 state 和 action 作为参数的函数。对于大的应用，我们会编写很多这样的小函数分别管理 state 的一部分，最终开发一个 reducer 将这些小的 reducer 合并起来，进而来管理整个 state。

三大原则

单一数据源

整个应用的 state 被存储在一棵 Object Tree 中，并且这个 Object Tree 只存在唯一一个 store 中。

State 是只读的

唯一可以改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述 action 如何修改 state，需要编写 reducer，reducer 就是一些纯函数，它接收 state 和 action，并返回新的 state。

Store

store 是维护应用的 state 的一个东西，我们可以调用 store 暴露的 API 做以下的事情：

提供 store.getState() 方法获取 state
提供 store.dispatch(action) 方法更新 state
通过 store.subscribe(listener) 注册监听器来监听 state 的更新
通过 unsubscribe = store.subscribe(listener) 返回的函数注销监听器

Redux 应用只有一个单一的 store，当需要拆分数据处理逻辑时，应该使用 reducer 组合而不是创建多个 store。

创建 store

const store = createStore(reducer, preloadedState)

store 就是一个返回了应用所有 state 的对象，改变 state 的唯一方法就是 dispatch 一个 action ，也可以通过 subscribe 监听 state 的变化，然后更新 UI。

const unsubscribe = store.subscribe(() =>
 console.log(store.getState())
)

Action

action 是 store 数据的唯一来源，可以通过 store.dispatch 将 action
传到 store 。

flux 标准的 action

const action = {
 // 相当于是 action 的名字
 type: 'ADD_TODO',
 // 这个属性存储负载的信息，如果 action 代表的是一个错误，这个对象就是一个 error 对象
 payload: {
 text: 'test'
 },
 // 如果 action 代表的是一个错误，这个属性就是 true
 error: true,
 // 额外的信息
 meta: {
 text: 'test'
 }
}

Reducer

Reducer 是一个纯函数，她接收 action 和旧的 state，然后返回新的 state。

function myReducer(state = initialState, action){
 switch (action.type) {
 case 'ACTION_TYPE':
 return Object.assign({}, state, {
 visibilityFilter: action.payload.filter
 })
 default:
 return state
 }
}

可以通过 combineReducers 来组合 reducers

import { combineReducers } from 'redux';

const todoApp = combineReducers({
 visibilityFilter,
 todos
})

export default todoApp;

// 等价于

function todoApp(state = {}, action){
 return {
 visibilityFilter: visibilityFilter(state.visibilityFilter, action),
 todos: todos(state.todos, action)
 }
}

原文 http://mertensming.github.io/2017/01/18/learn-redux/

正文到此结束