完善redux逻辑;引入immutable库

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "autoprefixer": "7.1.6",
-    "babel-eslint": "7.2.3",
     "babel-core": "^6.26.0",
+    "babel-eslint": "7.2.3",
     "babel-jest": "^23.6.0",
     "babel-loader": "7.1.2",
     "babel-preset-react-app": "^3.1.1",
@@ -26,6 +26,7 @@
     "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
+    "immutable": "^4.0.0-rc.12",
     "jest": "20.0.4",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
@@ -38,6 +39,7 @@
     "react-redux": "^5.1.1",
     "react-transition-group": "^2.5.0",
     "redux": "^4.0.1",
+    "redux-immutable": "^4.0.0",
     "resolve": "1.6.0",
     "style-loader": "0.19.0",
     "styled-components": "^4.0.0",

src/common/header/index.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import { CSSTransition } from "react-transition-group";
+import { actionCreators } from "./store";
 import {
     HeaderWrapper,
     Logo,
@@ -14,22 +15,19 @@ import { connect } from "react-redux"; //建立和store的连接
 
 const mapStateToProps = (state) => {
     return {
-        focused:state.header.focused
+        focused: state.getIn(['header', 'focused'])
+            //state.get("header").get('focused')
     }
 }
 
 const mapDispatchToProps = (dispatch) => {
     return {
         handleInputFocus(){
-            const action = {
-                type: 'search_focus'
-            };
+            const action = actionCreators.searchFocus();
             dispatch(action);
         },
         handleInputBlur(){
-            const action = {
-                type: 'search_blur'
-            };
+            const action = actionCreators.searchBlur();
             dispatch(action);
         }
     }

src/common/header/store/actionCreators.js

@@ -0,0 +1,8 @@
+import * as actionTypes from './constants';
+export const searchFocus = () => ({
+    type: actionTypes.SEARCH_FOCUS
+})
+
+export const searchBlur = () => ({
+    type: actionTypes.SEARCH_BLUR
+})

src/common/header/store/constants.js

@@ -0,0 +1,2 @@
+export const SEARCH_FOCUS = 'header/SEARCH_FOCUS';
+export const SEARCH_BLUR = 'header/SEARCH_BLUR';

src/common/header/store/index.js

@@ -1,2 +1,4 @@
 import reducer from "./reducer";
-export { reducer };
+import * as actionCreators from './actionCreators';
+import * as constants from './constants';
+export { reducer, actionCreators, constants}

src/common/header/store/reducer.js

@@ -1,6 +1,12 @@
-const defaultState = {
+import * as actionTypes from './constants';
+import { fromJS } from "immutable";
+
+const defaultState = fromJS({
     focused: false
-};
+});
+/**
+ * fromJS可以把一个js对象转化成一个immutable对象
+ */
 
 /**
  * 这里一定要保证是纯函数，返回固定值且没有副作用
@@ -9,15 +15,13 @@ const defaultState = {
  * @returns {{}}
  */
 export default (state = defaultState, action ) => {
-    if(action.type === 'search_focus') {
-        return {
-            focused: true
-        }
+    if(action.type === actionTypes.SEARCH_FOCUS) {
+        // immutable对象的set方法，会结合之前immutable对象的值
+        // 和设置的值，返回一个全新的对象
+        return state.set('focused', true);
     }
-    if(action.type === 'search_blur') {
-        return {
-            focused: false
-        }
+    if(action.type === actionTypes.SEARCH_BLUR) {
+        return state.set('focused', false);
     }
     return state;
 }

src/store/reducer.js

@@ -1,8 +1,11 @@
 /**
  * 大的笔记本reducer要聚集小的笔记本reducer
  **/
-import { combineReducers } from "redux"
-import {headerReducer} from "../common/header/store";
+//import { combineReducers } from "redux"
+import { combineReducers } from "redux-immutable";
+import { reducer as headerReducer } from "../common/header/store";
+
+//redux-immutable
 
 const reducer = combineReducers({
     header: headerReducer