使用redux-actions来简化redux的代码量

[incuisting]

简单介绍一下关于redux-actions 的使用。
文档地址

在不使用redux-actions之前，我们写redux的action是这么写的：

/*
 * action 类型
 */

export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

/*
 * action 创建函数
 */

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

export function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}

用上redux-actions之后，可以应该是这样一个画风

import { createActions } from 'redux-actions'

export const Actions = createActions({
    ADD_TODO:text=>({text}),
    TOGGLE_TODO:index=>({index}),
    SET_VISIBILITY_FILTER:filter=>({filter})
})

上述代码中的createActions,里面创建出来的几个action创建函数,当他们被dispatch之后的返回值，实际的返回值会是下面这样：

{
    type:'ADD_TODO',
    payload:{text:text}
}
// 偷懒省略两个

可以看到，createActions方式生成的action生成函数的返回值，会被自动格式化成一个固定的格式。
上面介绍的这种是createActions 比较基本的用法。更多的用法可以参照官方文档

有个重点要提一下，当你需要dispatch一个用createActions生成的actions生成函数的时候，请像下面这样去操作：

dispatch(Actions.addTodo('test'))

将原先的ADD_TODO以下划线为分割转换成驼峰的addTodo
官方还有一个createAction可以单独生成Action。详细使用可以参考文档

接下去讲Reducer

这样的reducer代码：

import { combineReducers } from 'redux'
import { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER } from './actions'

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case TOGGLE_TODO:
      return [
        ...state.slice(0, action.index),
        Object.assign({}, state[action.index], {
          completed: true
        }),
        ...state.slice(action.index + 1)
      ]
    default:
      return state
  }
}

export default todos

可以改写成下面这样：

import { combineReducers } from 'redux'
import { Actions } from './actions'
import { handleActions } from 'redux-actions'

const defaultState = {}

 export default handleActions({
    [Actions.addTodo]:(state,action)=>{
        return [
        ...state,
            {
                text: action.payload.text,
                completed: false
            }
        ]
    },
    [Actions.toggleTodo]:(state,{payload})=>{
        return [
        ...state.slice(0, action.index),
        Object.assign({}, state[action.index], {
          completed: true
        }),
        ...state.slice(action.index + 1)
       ]
    }
},defaultState)

reducer在逻辑部分的代码上没有发生太大的变化。主要是就是替换了switch 部分的逻辑。
基本使用介绍到这里，后续有时间再更新redux-actions与immutable如何搭配使用。