关于redux-actions : 优化redux的写法

先下载 redux-actions 插件

在action中使用：

import { createActions } from ‘redux-actions’
import { SET_HOME_DATA，SET_HOME_LIST } TYPES from ‘@/constants/actionsTypes.js’
export default createActions({
[SET_HOME_DATA]: opt => post(api.list, pot),
[SET_HOME_LIST]: opt => opt,
})

在reducer中使用 ：

import { handleActions } from ‘redux-actions’
import { SET_HOME_DATA，SET_HOME_LIST } TYPES from ‘@/constants/actionsTypes.js’

const defaultStatus = {
name : ‘小花’,
data : []
}

export default handleActions({
[SET_HOME_DATA] : (state, action) => ({ …state, name: action.payload}),
[SET_HOME_LIST] : (state,{ payload }) => {
let dt = _.get(payload, ‘data.result.list’,[])
dt = dt.map(v => ({ …v, …JSON.parse(v.info) }))
return { …state, data: [ …state.data, …dt]
}
})

在使用中 ：

import { connect } from ‘react-redux’
import { SET_HOME_DATA，SET_HOME_LIST } TYPES from ‘@/constants/actionsTypes.js’

import xxx from ‘@/actions/home’
import { str } from ‘@/utils/string’

str中分装的函数是把 SET_HOME_DATA 弄成驼峰命名法
函数如下：
export function str (sName) {
return sName.toLowerCase().replace(/^_/, ‘’).replace(/_([a-zA-Z0-9])([a-zA-Z0-9]+)/g, function (a, b, c) {
return b.toUpperCase() + c.toLowerCase()
})
}

export default connect(state => ({
data:state.home.data,
}),{
[SET_HOME_DATA]:xxx[str(SET_HOME_DATA)],
})(Home)

使用的时候 就是 propsSET_HOME_DATA