react reducer的拆分 整合 combineReducers

1. 在组件文件夹下创建一个文件夹store
2. 下面创建也个reducer.js 

   1. const defaultState = {
      }
      export default (state = defaultState,action) => {
          return state;
      }

       

3. 项目下的store文件下的reducer.js用combineReducers整合

4.  

   import { combineReducers } from 'redux'
   import { reducer as headerReducer} from '../common/header/store';
   
   const reducer = combineReducers({
       header:headerReducer
   })
   
   export default reducer;

    

5. 上面报错--再组件中的strore中创建index.js --

6. import reducer from './reducer';
   
   export { reducer };

   这样可以优化路径

7. 优化action

   1. header文件夹下的store文件夹下创建actionCreators.js

   2. import * as actionTypes from './actionTypes'
      
      export const searchFocus = () => ({
          type: actionTypes.SEARCH_FOCUS
      });
      export const searchBlur = () => ({
          type: actionTypes.SEARCH_BLUR
      }) 

       

   3. header文件夹下的store文件夹下创建actionTypes.js

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

       

   5. 把header文件夹下的store文件夹下的所有文件都在index.js中导出

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

       

   7. 在header文件夹下的index.js引用actionCreators 

   8. import { actionCreators } from './store';

      代码改变

      return {
      		handleInputFocus () {
      
      			dispatch(actionCreators.searchFocus())
      		},
      		handleInputBlur(){
      			dispatch(actionCreators.searchBlur())
      		}
      	}