7.actionCreators和constants的拆分19-

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第8次提交
1.首先在header的store下创建actionCreators.js和constants,
在constants里定义type值

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

在reducer中引入constants

import * as constants from './constants';

const defaultState = {
  focused: false
};
export default (state = defaultState, action) => {

  if(action.type === constants.SEARCH_FOCUS){
    return{
      focused: true
    }
  }
  if(action.type === constants.SEARCH_BLUR){
    return{
      focused: false
    }
  }
  return state;
}

2.在actionCreators.js中引入constants中定义的

import * as constants from './constants';
// * as 是引用ES6语法，表示引入constants中的所有

在actionCreators中添加代码

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

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

3.在header下store的index将文件导出

import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './constants';
export { reducer, actionCreators, constants };

4.在header的index中使用actionCreators

const mapDispatchToProps=(dispatch)=>{
  return{
    handleInputFocus(){
      dispatch(actionCreators.searchFocus());
    },
    handleInputBlur(){
      dispatch(actionCreators.searchBlur());
    }
  }
}