add:immutable

Author: hyy1115

package.json

@@ -19,6 +19,7 @@
     "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
+    "connected-react-router": "^4.4.1",
     "create-portal": "^1.2.0",
     "css-loader": "0.28.7",
     "dotenv": "4.0.0",
@@ -33,8 +34,10 @@
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
+    "history": "^4.7.2",
     "html-webpack-plugin": "2.29.0",
     "http-proxy-middleware": "^0.18.0",
+    "immutable": "^3.8.2",
     "jest": "20.0.4",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
@@ -55,9 +58,10 @@
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",
     "redux": "^4.0.0",
-    "redux-devtools-extension": "^2.13.2",
+    "redux-devtools-extension": "^2.13.5",
+    "redux-immutable": "^4.0.0",
     "redux-localstorage": "^0.4.1",
-    "redux-thunk": "^2.2.0",
+    "redux-thunk": "2.3.0",
     "resolve": "1.6.0",
     "serve": "^6.5.6",
     "style-loader": "0.19.0",

src/index.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
+import { createBrowserHistory } from 'history'
+import { createStore, applyMiddleware, compose } from 'redux'
 import { Provider } from 'react-redux'
-import persistState from 'redux-localstorage'
-import { composeWithDevTools } from 'redux-devtools-extension'
+import { connectRouter, routerMiddleware, ConnectedRouter } from 'connected-react-router/immutable'
+import Immutable from 'immutable'
+//import persistState from 'redux-localstorage'
 import thunk from 'redux-thunk'
-// import BaseRouter from 'react-router-dom/HashRouter'
-import BaseRouter from 'react-router-dom/BrowserRouter'
 import App from './App'
 import rootReducer from './reducers/index'
 import initReactFastclick from 'react-fastclick'
@@ -16,23 +16,28 @@ import './app.less'
 //解决移动端300毫秒延迟
 initReactFastclick()
 
-const middlewares = [thunk]
-
-const enhancer = compose(
-  persistState(/*paths, config*/)
-)
+const history = createBrowserHistory()
 
+const initialState = Immutable.Map()
+const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 const store = createStore(
-  combineReducers({ ...rootReducer }),
-  composeWithDevTools(applyMiddleware(...middlewares), enhancer)
+  connectRouter(history)(rootReducer),
+  initialState,
+  composeEnhancer(
+    //persistState(/*paths, config*/), //数据持久化，暂时没有调通，备用状态
+    applyMiddleware(
+      routerMiddleware(history),
+      thunk
+    )
+  )
 )
 
 const render = Component =>
   ReactDOM.render(
       <Provider store={store}>
-        <BaseRouter>
+        <ConnectedRouter history={history}>
           <Component />
-        </BaseRouter>
+        </ConnectedRouter>
       </Provider>,
     document.getElementById('root')
   )

src/pages/Home/Home.js

@@ -23,7 +23,7 @@ const search = require('./files/search.svg')
 
 
 @connect(
-  state => ({ ...state.home }),
+  state => state.getIn(['home']),
   dispatch => bindActionCreators({ getBook, getNav }, dispatch)
 )
 class Home extends React.Component {

src/pages/Search/Search.js

@@ -13,7 +13,7 @@ import HotSearch from './components/HotSearch'
 import styles from './styles/search.less'
 
 @connect(
-  state => ({ ...state.search }),
+  state => state.getIn(['search']),
   dispatch => bindActionCreators({ receiveHotSearch }, dispatch)
 )
 class Search extends React.Component {

src/reducers/index.js

@@ -1,10 +1,11 @@
+import { combineReducers } from 'redux-immutable'
 import { home } from './home'
 import { search } from './search'
 import { global } from './global'
-const rootReducer = {
+const rootReducer = combineReducers({
   /* your reducers */
   home, //首页相关
   search, //搜索相关
   global
-}
+})
 export default rootReducer