Update MiniRedux to use subscribe wording

subjects/MiniRedux/exercise/mini-redux/createStore.js

@@ -1,27 +1,28 @@
-import { EventEmitter } from 'events'
-
-const CHANGE = 'change'
-
-export default function createStore(reducer) {
+const createStore = (reducer) => {
   let state = reducer(undefined, { type: '@INIT' })
-  const events = new EventEmitter()
+  let listeners = []
 
-  return {
-    getState() {
-      return state
-    },
+  const getState = () =>
+    state
 
-    dispatch(action) {
-      state = reducer(state, action)
-      events.emit(CHANGE)
-    },
+  const dispatch = (action) => {
+    state = reducer(state, action)
+    listeners.forEach(listener => listener())
+  }
 
-    listen(listener) {
-      events.on(CHANGE, listener)
-    },
+  const subscribe = (listener) => {
+    listeners.push(listener)
 
-    removeListener(listener) {
-      event.removeListener(CHANGE, listener)
+    return () => {
+      listeners = listeners.filter(item => item !== listener)
     }
   }
+
+  return {
+    getState,
+    dispatch,
+    subscribe
+  }
 }
+
+export default createStore

subjects/MiniRedux/solution/mini-redux/connect.js

@@ -7,27 +7,26 @@ const connect = (mapStateToProps) => {
         store: PropTypes.object
       }
 
-      state = this.getStateFromStore()
-
-      listener = () => {
-        this.setState(this.getStateFromStore())
-      }
-
-      getStateFromStore() {
-        const storeState = this.context.store.getState()
-        return mapStateToProps(storeState)
-      }
-
       componentDidMount() {
-        this.context.store.listen(this.listener)
+        this.unsubscribe = this.context.store.subscribe(() => {
+          this.forceUpdate()
+        })
       }
 
       componentWillUnmount() {
-        this.context.store.removeListener(this.listener)
+        this.unsubscribe()
       }
 
       render() {
-        return <Component {...this.state} dispatch={this.context.store.dispatch}/>
+        const props = mapStateToProps(this.context.store.getState())
+
+        return (
+          <Component
+            {...this.props}
+            {...props}
+            dispatch={this.context.store.dispatch}
+          />
+        )
       }
     }
   }

subjects/MiniRedux/solution/mini-redux/createStore.js

@@ -1,27 +1,28 @@
-import { EventEmitter } from 'events'
-
-const CHANGE = 'change'
-
-export default function createStore(reducer) {
+const createStore = (reducer) => {
   let state = reducer(undefined, { type: '@INIT' })
-  const events = new EventEmitter()
+  let listeners = []
 
-  return {
-    getState() {
-      return state
-    },
+  const getState = () =>
+    state
 
-    dispatch(action) {
-      state = reducer(state, action)
-      events.emit(CHANGE)
-    },
+  const dispatch = (action) => {
+    state = reducer(state, action)
+    listeners.forEach(listener => listener())
+  }
 
-    listen(listener) {
-      events.on(CHANGE, listener)
-    },
+  const subscribe = (listener) => {
+    listeners.push(listener)
 
-    removeListener(listener) {
-      event.removeListener(CHANGE, listener)
+    return () => {
+      listeners = listeners.filter(item => item !== listener)
     }
   }
+
+  return {
+    getState,
+    dispatch,
+    subscribe
+  }
 }
+
+export default createStore