react之路：使用actionCreators和constants

github仓库地址：https://github.com/wanghao12345/react-book

使用constants

constants主要是用来管理一些固定的常量，在功能模块下的store新建constants.js文件。内容如下：

export const SEARCH_FOCUS = 'header/SEARCH_FOCUS'
export const SEARCH_BLUR = 'header/SEARCH_BLUR'
export const SEARCH_FOCUS = 'header/SEARCH_FOCUS'
export const SEARCH_BLUR = 'header/SEARCH_BLUR'
export const SEARCH_FOCUS = 'header/SEARCH_FOCUS'
export const SEARCH_BLUR = 'header/SEARCH_BLUR'
export const SEARCH_FOCUS = 'header/SEARCH_FOCUS'
export const SEARCH_BLUR = 'header/SEARCH_BLUR'
......

使用actionCreators

最开始在使用mapDispatchToProps的dispatch进行发送action的时候，action是我们自己命名的一个对象，现在使用actionCreators命名函数替换掉最开始命名的对象。

在功能模块下的store下新建actionCreators.js。如下：

import * as constants from './constants'

export const searchFocus = () => ({
    type: constants.SEARCH_FOCUS
})

export const searchBlur = () => ({
    type: constants.SEARCH_BLUR
})

然后就可以在mapDispatchToProps中使用了

import { actionCreators }  from './store'
/**
 *  将dispatch映射到props(改变state)
 * @param dispatch
 */
const mapDispatchToProps = (dispatch) => {
    return {
        // 聚焦
        handleInputFocus () {
            // const action = {
            //     type: 'search_focus'
            // }
            // dispatch(action)

            // 使用actionCreators
            dispatch(actionCreators.searchFocus())
        },
        // 离焦
        handleInputBlur () {
            // const action = {
            //     type: 'search_blur'
            // }
            // dispatch(action)

            // 使用actionCreators
            dispatch(actionCreators.searchBlur())
        }
    }
}