diff --git a/subjects/MiniRedux/exercise/mini-redux/createStore.js b/subjects/MiniRedux/exercise/mini-redux/createStore.js index 52352cf60..3e5b07337 100644 --- a/subjects/MiniRedux/exercise/mini-redux/createStore.js +++ b/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 diff --git a/subjects/MiniRedux/solution/mini-redux/connect.js b/subjects/MiniRedux/solution/mini-redux/connect.js index 602880448..eb143e4a4 100644 --- a/subjects/MiniRedux/solution/mini-redux/connect.js +++ b/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 + const props = mapStateToProps(this.context.store.getState()) + + return ( + + ) } } } diff --git a/subjects/MiniRedux/solution/mini-redux/createStore.js b/subjects/MiniRedux/solution/mini-redux/createStore.js index 52352cf60..3e5b07337 100644 --- a/subjects/MiniRedux/solution/mini-redux/createStore.js +++ b/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