diff --git a/step2-05/demo/src/index.tsx b/step2-05/demo/src/index.tsx index 46b98b1..6c057ce 100644 --- a/step2-05/demo/src/index.tsx +++ b/step2-05/demo/src/index.tsx @@ -1,9 +1,6 @@ import { reducer } from './reducers'; -import { createStore, compose } from 'redux'; +import { createStore } from 'redux'; -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; - -const store = createStore(reducer, {}, composeEnhancers()); +const store = createStore(reducer); console.log(store.getState()); diff --git a/step2-05/exercise/src/index.tsx b/step2-05/exercise/src/index.tsx index 46b98b1..6c057ce 100644 --- a/step2-05/exercise/src/index.tsx +++ b/step2-05/exercise/src/index.tsx @@ -1,9 +1,6 @@ import { reducer } from './reducers'; -import { createStore, compose } from 'redux'; +import { createStore } from 'redux'; -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; - -const store = createStore(reducer, {}, composeEnhancers()); +const store = createStore(reducer); console.log(store.getState()); diff --git a/step2-06/README.md b/step2-06/README.md index 23810f5..4ec943a 100644 --- a/step2-06/README.md +++ b/step2-06/README.md @@ -4,7 +4,10 @@ Redux: Dispatching Actions and Examining State. In this step, we learn about `dispatch` and `getState()`. Dispatching action messages to the store is the only means by which to inform the reducers to modify the shared state tree. -We also saw how we may compose the reducers according to the shape +We also see how we may compose the reducers according to the shape. + +If you want a really neat UI to show what the store looks when actions are dispatched to the store, use this Chrome extension: +https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd # Exercise diff --git a/step2-07/README.md b/step2-07/README.md index 1896379..70824d4 100644 --- a/step2-07/README.md +++ b/step2-07/README.md @@ -2,6 +2,14 @@ Connect store to view with `react-redux`. `connect()` is used to turn Redux store and dispatch functions into props inside React components. The state and action dispatchers are passed along with a `` component. +```ts +const NewComponent = function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(OldComponent); +``` + +The `connect()` function takes in a few functions that maps some portion of the state tree and dispatcher functions as props. It is a **higher order function** meaning that the return value of `connect()` is a function that decorates OldComponents into a NewComponent with all the mapped props. + +This `mapStateToProps` function selects out portions of the state tree. This function informs the connected view when to re-render based on a shallow comparison from previous state. + # Exercise 1. open up `exercise/src/index.tsx` and wrap `` with `` as instructed in the comment