js手札--redux简单学习[ store, action, reducer ]

Redux简单学习 - [ store, action, reducer ]

前言

redux是一套state流的处理机制。

主要有三要素：

1. store 【长官】 管理状态，给某个士兵发命令

2. action 【命令】 一种长官和士兵之间沟通的方式

3. reducer 【士兵】 执行命令，并反馈给长官

主要有三层数据流：

长官下达命令并把当前任务状态告诉士兵 =>

士兵执行命令反馈任务状态给长官 =>

长官更新任务状态

1. 单一的state树

所有状态都在一颗唯一的state树种

2. 要改state，只能通过Action指令

Action通过type，表明了我要修改什么东东，相当于一个指令

{
  type: 'ADD_TODO',
  text: 'Build my first Redux app'
}

Action一般通过Action创建函数生成

// actions.js

export default function todos(type, a, b) {
  return {
    type,
    a,
    b
  }
}

3. Reducer通过action更新state

// reducers.js

export default function todoApp(state, action) {
  switch (action.type) {
    case 'add':
      return Object.assign({}, state, {
          result : action.a + action.b
      })
    case 'sub':
      return Object.assign({}, state, {
          result : action.a - action.b
      })
    default:
      return state
  }
}

4.Store管理state的变化

• 维持应用的 state；

• 提供 getState() 方法获取 state；

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

• 通过 subscribe(listener) 注册监听器;

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

可以说store是真正的state管理者，其他的，如action是命令，reducer是执行命令的士兵。

// store.js

import { createStore } from 'redux';
import { todos } from './actions';
import { todoApp } from './reducers.js';

let store = createStore(todoApp);

// 打印初始状态
console.log(store.getState())

// 每次 state 更新时，打印日志
// 注意 subscribe() 返回一个函数用来注销监听器
let unsubscribe = store.subscribe(() =
  console.log(store.getState())
)

// 发起一系列 action
store.dispatch(todos('add', 100, 99));
store.dispatch(todos('sub' ,100, 99));

// 停止监听 state 更新
unsubscribe();

redux简单学习（二）