Redux Note

管理应用的状态(sync/async更新)

• 服务器数据
• 缓存数据
• 本地生成数据
• UI状态

基本原则

• 单一数据源(调试、保存应用状态、undo/redo)
• 状态只读，只能通过触发action变换状态(action描述事件)
• 通过reducer(pure function)定义状态变换

核心概念

• Actions
• Reducers
• Store

Actions

• 应用中的数据通过action传递到store
• action是store的唯一数据源
• action是纯js对象, 由type及其他自定义结构组成，其中type通常为string

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

// action type
const ADD_TODO = 'ADD_TODO'

// action
{
  type: ADD_TODO,
  text: 'This is an action'
}

// action creator
const addTodo = text => ({
  type: ADD_TODO,
  text
})

// dispatch action
store.dispatch(addTodo('This is an action'))

Reducers

定义应用状态如何变化

reducer必须是pure function.

Given the same arguments, it should calculate the next state and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation.*

(previousState, action) => nextState

const initState = {
  todos: []
}

const todoApp(state = initState, action) => {
  switch(action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [
          ...state,
          action.text
        ]
      }
    default:
      return state
  }
}

Store

关联Actions及Reducers，职责包括：

• 保存应用状态
• 获取状态接口getState()
• 更新状态接口dispatch(action)
• 注册状态更新处理方法subscribe(listener)
• 取消注册状态更新处理方法，调用subscribe(listener)的返回方法

  import { createStore } from 'redux';

  const ADD_TODO = 'ADD_TODO';

  /**
   + addTodo action creator
   */
  const addTodo = text => ({
    type: ADD_TODO,
    text
  })

  /**
   - todoApp reducer
   */
  const todoApp = (state = [], action) => {
    switch(action.type) {
      case ADD_TODO:
        return [
          ...state,
          action.text
        ]
      default:
        return state
    }
  }


  const store = createStore(todoApp)

  const render = () => ({
    console.log(store.getState())
  })

  const unsubscribe = store.subscribe(render)

  store.dispatch(addTodo('action'))
  store.dispatch(addTodo('reducer'))
  store.dispatch(addTodo('store'))

  unsubscribe()

高级用法

• Async Actions
• Middleware
• combineReducers

Async Actions

基于redux-thunk middleware实现异步action

// redux-thunk
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

// async action
const fetchTodos = () => {
  return dispatch => {
    dispatch(requestTodos())
    return todoService.getAll()
      .then(todos => {
        dispatch(receiveTodos(todos))
      })
  }
}
}

Middleware

applyMiddleware.js

({ dispatch, getState }) => next => action

const logger = store => next => action => {
  console.log('dispatch', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

combineReducers

const todos = (state = [], action) => {
  return state
}

const counter = (state = 0, action) => {
  return state
}

combineReducers({
  todos,
  counter
})

实践

Action组织

• makeActionCreator

  function makeActionCreator(type, ...argNames) {
    return function(...args) {
      let action = { type }
      argNames.forEach((arg, index) => {
        action[argNames[index]] = args[index]
      })
      return action
    }
  }

  const ADD_TODO = 'ADD_TODO'

  export const addTodo = makeActionCreator(ADD_TODO, 'text')

• Flux Standard Action
• redux-actions

异步action

• middleware
• redux-saga

State结构设计

• 状态类型

  • Dommain Data
  • App State
  • UI State

      {
      domainData1 : {},
      domainData2 : {},
      appState1 : {},
      appState2 : {},
      ui : {
          uiState1 : {},
          uiState2 : {},
      }
  }

• normalizr

Reducer组织

Redux DevTools

React + Redux

TODO

• middleware
• combineReducer example
• redux-actions
• redux-saga