From 7fe50e73663b9fa9dd9df383e6bdc5da2e671fa7 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 22 Feb 2019 19:26:42 -0800 Subject: [PATCH] adding a bit of details to step2-07 --- step2-05/demo/src/index.tsx | 7 ++----- step2-05/exercise/src/index.tsx | 7 ++----- step2-06/README.md | 5 ++++- step2-07/README.md | 8 ++++++++ 4 files changed, 16 insertions(+), 11 deletions(-) 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