use immutable

helloworld-redux-counter/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "immutable": "^4.0.0-rc.12",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-redux": "^5.0.7",

helloworld-redux-counter/src/containers/HelloWorld.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { incrementCount } from '../actions/counter.js';
 import HelloWorld from '../components/HelloWorld'
 export const mapStateToProps = (state) => ({
-    clicks: state.counter || 0
+    clicks: state.get('counter') || 0
 });
 
 export const mapDispatchToProps = dispatch => ({

helloworld-redux-counter/src/reducers/index.js

@@ -1,10 +1,10 @@
 import { INCREMENT_COUNTER } from "../actions/constants";
-
-export default function rootReducer(state = {counter: 0}, action){
+import { Map } from 'immutable';
+export default function rootReducer(state = Map({counter: 0}), action){
     switch(action.type) { 
         case INCREMENT_COUNTER:
             debugger;
-            return {counter: state.counter + 1};
+            return state.set('counter', state.get('counter') + 1);
         default:
             return state;
     }

helloworld-redux-counter/src/store/index.js

@@ -1,7 +1,6 @@
 import { createStore, applyMiddleware, compose } from 'redux'
 import rootReducer from '../reducers'
 
-const initialState = {}
 const enhancers = []
 const middleware = [
 ]

helloworld-redux-counter/yarn.lock

@@ -3251,6 +3251,10 @@ ignore@^3.3.3:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
 
+immutable@^4.0.0-rc.12:
+  version "4.0.0-rc.12"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"