Redux笔记（一）：基础用法

1.什么是Redux

Redux是一个JavaScript状态容器，提供可预测化的状态管理。Redux除了可以和React一起使用外，还支持其他的界面库。

2.三大原则

• 单一数据源（整个应用的state被存储在一个object tree中，并且这个object tree只存在于唯一一个store中。这样可以保证整个数据的唯一性，为维护阅读起来更便捷）
• state是只读的（唯一改变state的方法就是触发action，action是一个用于描述已发生事件的普通对象）
• 使用纯函数来执行修改（为了描述action 如何改变state tree ，你需要编写 reducers。）

3.安装

可以用npm安装稳定版：

npm install --save redux

多数情况下，还可以使用React绑定库和开发者工具：

npm install --save react-redux
npm install --save-dev redux-devtools

4.基本概念

Redux中涉及的主要概念有：Store、State、Action、Reducer

(1) store
store是Redux中保存数据的仓库，它的主要职责有：
1）维持应用的state
2）提供getState()方法获取state
3）提供dispatch(action)方法更新state
4）通过subscribe(listener)注册监听器，subscribe(listener)， 方法返回的函数可以注销监听器
创建一个store，可以使用createStore()方法，如：

import { createStore } from 'redux';
const store = createStore(fn);

(2) state
Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
当前时刻的 State，可以通过store.getState()拿到。

import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();

（3） action
Redux通过action将数据传到 store 。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
action的结构只是一个普通的js对象。

export const saveList = payload => ({
  type: actionTypes.SAVE_LIST,
  payload,
})

这里需要注意的是：
1）一个action中应该包含有一个type，表示动作名称（在大型应用中，推荐采用常量并分离到一个单独的文件中，如actionTypes.js）
2）除了type外，action中的其他属性都是随意的，其他的属性称之为载荷(payload)
3）应该尽量减少在action中传递的数据

（4）reducer
Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.SAVE_LIST:
    case actionTypes.SAVE_PROJECTS:
      return { ...state, ...action.payload }

    default:
      return state
  }
}
export default reducer

Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。

import { combineReducers } from 'redux';

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

export default todoApp;

(5) store.dispatch()
store.dispatch()是 View 发出 Action 的唯一方法。

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
  type: 'SAVE_LIST',
  payload: 'Learn Redux'
});

在store里，会直接通过store.dispatch()来调用dispatch()方法。不过多数情况下，我们会采用react-redux提供的connect()来帮助调用。此外，还有辅助函数bindActionCreators()，可以自动把多个action创建函数绑定到dispatch()方法上。

5.工作流程

首先，用户发出Action

store.dispatch(action);

然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。

let nextState = todoApp(previousState, action);

State 一旦有变化，Store 就会调用监听函数。

// 设置监听函数
store.subscribe(listener);

listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。