redux-docs

• 你整个application的state都存在一个单独的store里面
• 这会很容易的创建universal app,这也会让你的代码很容易调试
• 而且传统意义上面非常困难的事情,比如Undo/Redo可以里面变动很容易,因为你的state 都存在以single tree里面,下面就是我们打印的一个store的例子

  console.log(store.getState());
  
  ////////////////////////////////////////////////////
  // <===================OUTPUT===================> //
  // {                                              //
  //   visibilityFilter: 'SHOW_ALL',                //
  //   todos: [                                     //
  //     {                                          //
  //       text: 'Consider using Redux',            //
  //       completed: true,                         //
  //     },                                         //
  //     {                                          //
  //       text: 'Keep all state in a single tree', //
  //       completed: false                         //
  //     }                                          //
  //   ]                                            //
  // }                                              //
  ////////////////////////////////////////////////////
  

• 改动state的唯一方法,就是赋予这个state一个action, 这个action是用来描述"发生 了什么事情(比如用户按了一个按钮)"
• 因为action只不过是一个plain object,它可以被log, serialize, store,并且以后 用做测试用途
• 而所有的change是统一管理在一个store里面的,也就不会出现race condition,如下, 我们总是对一个store进行操作,操作肯定是有顺序的,非异步的,也就不会有race condition

  store.dispatch({
      type: 'COMPLETE_TODO',
      index: 1
  })
  
  store.dispatch({
      type: 'SET_VISIBILITY_FILTER',
      filter: 'SHOW_COMPLETED'
  })
  

• action描述了"发生了什么", action可能有多种,而根据不同的action来决定state如 何改变的函数叫做reducer
• redux的reducer的特点在于,其pick一个state,分析了action以后,决定使用某种改动 之于state,然后会生成一个新的state来返回!
• 最开始的时候你可能只有一个reducer,但是随着项目的扩大,你可以把你的reducer分 成多个每个都对应一个state tree(然后最后再合起来).因为reducer是简单的function 所以你完全可以复用它们, 传递additional data给它们, 控制它们调用的顺序,redux 的灵活性,就体现在reducer里面了
• 下面就是我们的一个例子,我们有两个reducer,分别处理不同的state tree,最后把它 们合并成一个,再用这一个reducer来初始化一个store

  function visibilityFilter(state = 'SHOW_ALL', action) {
      switch (action.type) {
          case 'SET_VISIBILITY_FILTER':
              return action.filter
          default:
              return state
      }
  }
  
  function todos(state = [], action) {
      switch (action.type) {
          case 'ADD_TODO':
              return [
                  ...state, {
                      text: action.text,
                      completed: false
                  }
              ]
          case 'COMPLETED_TODO':
              return state.map((todo, index) => {
                  if (index === action.index) {
                      return Object.assign({}, todo, {
                          completed: true
                      })
                  }
                  return todo
              })
          default:
              return state
      }
  }
  
  import {
      combineReducers,
      createStore
  } from 'redux'
  let reducer = combineReducers({
      visibilityFilter,
      todos
  })
  let store = createStore(reducer)
  

• redux从flux借鉴来的是"使用action来描述产生了哪些改变"
• 但是和flux不同的是:
  • Redux没有Dispatcher的概念
  • Redux不让你更改data,而是创建一个新的data

• Elm是一个functional programming language, 在elm里面更新要遵守如下格式

  (action, state) => state
  

• Immutable是一个js library,它和redux和合拍,所以我们推荐你使用这个library
• 说推荐使用,是因为redux根本不care你使用什么来存储state,可是object,可以是immutable js object,也可以是任何的其他什么对象.但是redux do care你的object必须是 immutable的.所以Backbone就不能做Redux的state啦,因为Backbone model是mutable 的

• Baobab是另外一个immutable的API,用来更新plain js object

• Reactive Extensions的简称,是一个优秀的管理复杂asynchronous app的方法

• action creator和action不是一回事,action creator说白了就是一个'创建并返回 action的function',比如下面就是一个action creator

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

• 在传统的flux里面,也有action creator(action的概念就是从flux里面来的),但是flux 里面的action creator还得负责trigger dispatch, 但是我们的redux里面,dispatch 函数是要自己主动触发的(前面的例子是store调用了dispatch, 而我们这里是直接调 用dispatch函数, 看过源代码后就知道,js是定义了这个函数,然后把这个函数作为 store object的一个组成部分而已,在任何地方都可以使用这个函数Redux.dispatch)
  • 在flux里面,action creator主动调用dispatch

    function addTodoWithDispatch(text) {
        const action = {
            type: ADD_TODO,
            text
        }
        dispatch(action)
    }
    

  • 在Redux里面,使用下面代码,直接调用dispatch(xxaction)

    dispatch(addTodo(text))
    dispatch(completeTodo(index))
    

  • 当然也可以达到flux'自动'调用的样子,这种叫做bound action creator

    const boundAddTodo = (text) => dispatch(addTodo(text))
    
    // call example
    boundAddTodo(text)
    

  • 虽然我们可以直接调用dispatch(),或者使用store.dispatch(),但是更多的情况下 你很可能会使用helper函数,比如react-redux里面的connect()
  • 另外你可以给dispatch()函数邦迪很多个action creator,方法是函数bindActionCreators()

• 在redux里面,所有的application state都存在一个single object里面,我们先来看看 一个最最简单的object是什么样子的, 对于一个todo app,我们就存两种东西:
  • 我们当前选择的filter方式(全显示,只显示已完成,还是只显示未完成)
  • 全部的todo list
• 下面就是我们的state tree

  {
      visibilityFilter: 'SHOW_ALL',
      todos: [
          {
              text: 'Consider using Redux',
              completed: true
          },
          {
              text: 'Keep all state in a single tree',
              completed: false
          }
      ]
  
  }
  

• 好了,设计好state的样子之后,下面就来创建reducer, reducer是一个pure function 它的输入是一个老的State和一个action,返回值是一个新的state

  (previousState, action) => newState
  

• reducer之所以被叫做reducer,是因为像我们reducerFun()这样的函数(输入一个state, 更改后返回新的state)在历史上经常传递给Array.prototype.reduce, 也就是说reducerFun 就好像是reduce()的跟班一样.但是其实我们redux的reducer并不会传递给一个reduce函数!
• 下面是一个reduce的例子

  // Sum all the values of an array
  var total = [0, 1, 2, 3].reduce((acc, cur) => acc + cur, 0); // total = 6
  

• 作为一个pure function,你不能再reducer里面做下面的事情. reducer最好只做计算
  • 改变parameter
  • 调用会产生side effect的API
  • 调用non-pure的函数,比如Date.now()或者是Math.random()
• 我们的reducer还要设置initial state, 这个是和常规我们理解的reducer不一样的, 这是因为常规的reducer会传入reduce(),这个reduce()会自带initial value,而我们 没有这个便利,我们要自己设置初始化参数

  import { VisibilityFilters } from './actions'
  
  const initialState = {
      visibilityFilter: VisibilityFilters.SHOW_ALL,
      todos: []
  }
  
  function todoApp(state, action) {
      if (typeof state === 'undefined') {
          return initialState
      }
  
      // for now, don't handle any actions
      return state
  }
  

• 当然了我们可以使用ES6的default argument来写,也就是

  function todoApp(state = initialState, action) {
      // ...
      return state
  }
  

• 好了,我们来处理一个action,比如SET_VISIBILITY_FILTER

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

• 注意Object.assign()是创建一些新的object,注意,第一个参数还得设置成空的object, 这是为了保护state不被改动.Object.assign()会把自己从第二个参数开始的所有参数 加入第一个参数,然后返回第一个参数的copy
• 默认情况下返回原来的state,也是一个好主意(至少不会遭到破坏)

• 让我们来处理更多的action,加case就好了

  function todoApp(state = initialState, action) {
      switch (action.type) {
          case SET_VISIBILITY_FILTER:
              return Object.assign({}, state, {
                  visibilityFilter: action.filter
              })
          case ADD_TODO:
              return Object.assign({}, state, {
                  todos: [
                      ...state.todos, {
                          text: action.text,
                          completed: false
                      }
                  ]
              })
          default:
              return state
      }
  }
  

• 这里我们还是新建了一个state, 这个state使用了array spread operator来展现array 的所有成员
• 再增加一个case也是很轻松的事情了

  case TOGGLE_TODO:
      return Object.assign({}, state, {
          todos: state.todos.map((todo, index) => {
              if (index === action.index) {
                  return Object.assign({}, todo, {
                      comleted: !todo.completed
                  })
              }
          })
      })
  

• 如果经常做这样的"无损更新"可能你就会想要使用类似Immutable这样的原生的immutable 支持,所以deep update也就支持的很好了

• 我们把代码写出来就发现了一个问题,更新todo和更新visibilityFilter其实是两个 完全独立的事件,我们写在一个reducer里面就会造成函数特别的大,一个解决的办法 就是把我们的reducer分开, reducer分开的同时,我们也要把state分开!:
  • 一部分处理visibilityFilter,state初始值是一个string

    function visibilityFilter(state = SHOW_ALL, action) {
        switch (action.type) {
        case SET_VISIBILITY_FILTER:
            return action.filter
        default:
            return state
        }
    }
    

  • 另外一部分处理todos,初始值是一个数组

    function todos(state = [], action) {
        switch (action.type) {
        case ADD_TODO:
            return [
                    ...state,
                {
                    text: action.text,
                    completed: false
                }
            ]
        case TOGGLE_TODO:
            return state.map((todo, index) => {
                if (index === action.index) {
                    return Object.assign({}, todo, {
                        completed: !todo.completed
                    })
                }
                return todo
            })
        default:
            return state
        }
    }
    

  • 最后,要把两个reducer结合起来

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

  • 上面的结合由于经常会用到,redux设计了一个helper函数

    import { combineReducers } from 'redux'
    
    const todoApp = combineReducers({
        visibilityFilter,
        todos
    })
    
    export default todoApp
    

• 我们使用pure function的好处,是我们可以在没有UI的情况下进行测试,我们连mock 都不需要,下面就是我们的例子:每次改动后,都去打印state

  import { addTodo, toggleTodo, setVisibilityFilter, VisibilityFilters } from './actions'
  
  // Log the initial state
  console.log(store.getState())
  
  // Every time the state changes, log it
  // Note that subscribe() returns a function for unregistering the listener
  let unsubscribe = store.subscribe(() =>
    console.log(store.getState())
  )
  
  // Dispatch some actions
  store.dispatch(addTodo('Learn about actions'))
  store.dispatch(addTodo('Learn about reducers'))
  store.dispatch(addTodo('Learn about store'))
  store.dispatch(toggleTodo(0))
  store.dispatch(toggleTodo(1))
  store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))
  
  // Stop listening to state updates
  unsubscribe()
  

• React bindings没有默认安装在Redux, 所以你需要如下命令安装

  npm install --save react-redux
  

• React bindings for Redux的理论支持来源于对如下两个概念的区分:
  • presentational component: 我们可以简单理解为只用来展示(往往有DOM对应),而 没有state的react component
  • container component: 我们可以理解为用来应对更改,从而state比较丰富,但是一 般没有DOM对应的component
• 下面我们用表格来对这两种component来做个比较

  	Presentational Components	Container Components
  Purpose	How things look	How thins work
  Aware of Redux	No	Yes
  To read data	Read data from props	Subscribe to Redux state
  To change data	Invoke callbacks from props	Dispatch Redux actions
  Are written	By hand	Usually generated by React Redux

• 我们大部分写出来的component都是presentational的,但是也需要一些和Redux store 联系的component:从技术上来讲,我们当然可以使用store.subscribe()来自己书写, 但是为了享受到React Redux为我们做的optimization, 我们要使用connect()来自动 生成这component!

• 我们前面已经设计好了root state object,现在来设计UI

• 好了我们下面来实现这些component,我们先实现presentational component,这些component 根本不需要redux的知识

• 我们的store是所有的commponent都必须接触到的,给每个component都传递一个包含 store的props显然是可以的,但是这也就不能叫做store了对吧
• 我们的方法是使用<Provider>,这个方法可以让所有的component获得store,而不用再 props里面显示设置

  import React from 'react'
  import { render } from 'react-dom'
  import { Provider } from 'react-redux'
  import { createSotre } from 'redux'
  import todoApp from './reducers'
  import App from './components/App'
  
  let store = createStore(todoApp)
  
  render(
          <Provider store= {store}>
          <App/>
          </Provider>,
      document.getElementById('root')
  )
  

Advanced

• 当你使用asynchronous API的时候,会有两个特别的时间点:
  • 你发出call的moment
  • 你接受到answer(timeout也算)的moment
• 一般情况下一个API请求都需要处理三个action:
  • 一种通知reducer请求开始的action
  • 一种通知reducer请求成功结束的action
  • 一种通知reducer请求失败的action
• 我们可以使用一个status字段来处理三种action

  { type: 'FETCH_POSTS' }
  { type: 'FETCH_POSTS' , status: 'error', error: 'Oops'}
  { type: 'FETCH_POSTS' , status: 'success', response: {...}}
  

• 但是更好的方案是定义不同的type

  { type: 'FETCH_POSTS_REQUEST' }
  { type: 'FETCH_POSTS_FAILURE', error: 'Oops'}
  { type: 'FETCH_POSTS_SUCCESS', response: { ... }}