abruzzi · January 31, 2018 03:02 · Jun 7, 2016 · Jun 7, 2016 · Jun 7, 2016 · Jun 7, 2016
diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -40,7 +40,7 @@ function mapStateToProps(state) {
 There are a couple problems with this approach as the application grows.
 
 1. The implementation of `incompleteItems` may change.
-2. Computation logic occurs in mapStateToProps
+2. Computation logic occurs in `mapStateToProps`
 3. Can't memoize the values of `incompleteItems`
 
 ## The Solution

diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -45,7 +45,7 @@ There are a couple problems with this approach as the application grows.
 
 ## The Solution
 
-After talking with Dan Abramov (founder of Redux) he has been preaching the colocation of functions called `selectors`. 
+After talking with Dan Abramov (founder of Redux) he has been preaching the colocation of functions called `selectors` with your reducers. 
 
 What is a `selector`?
 

diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -66,7 +66,7 @@ function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Obje
   }
 }
 
-function getIncompleteItems(state) {
+function getIncompleteItems(state: Object): Array<Object> {
   return state.listOfItems.filter((item) => {
     return !item.completed
   });

diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -88,4 +88,4 @@ More importantly we can now memoize this state with [reselect](https://github.co
 
 ## Next Steps:
 
-Now don't go and rewrite all your `mapFns`! We'lluse this pattern going forward on new reducers and Redux `connect` components.
+Now don't go and rewrite all your `mapFns`! We'll use this pattern going forward on new reducers and Redux `connect` components.
diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -57,6 +57,15 @@ Let's turn our filter into a `selector`.
 ### Place your selectors near the Redux reducer!!!
 
 ```js
+function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
+  switch(action.type) {
+    case 'SHOW_ALL_ITEMS':
+      return action.data.items
+    default:
+    return state;
+  }
+}
+
 function getIncompleteItems(state) {
   return state.listOfItems.filter((item) => {
     return !item.completed

diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -75,4 +75,8 @@ function mapStateToProps(state) {
 ```
 
 Now we can reuse this logic across many components mapping this exact state! We can unit test it as well! 
-More importantly we can now memoize this state with [reselect](https://github.com/reactjs/reselect)
+More importantly we can now memoize this state with [reselect](https://github.com/reactjs/reselect)
+
+## Next Steps:
+
+Now don't go and rewrite all your `mapFns`! We'lluse this pattern going forward on new reducers and Redux `connect` components.
diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -39,7 +39,7 @@ function mapStateToProps(state) {
 
 There are a couple problems with this approach as the application grows.
 
-1. If the implementation of `incompleteItems` may change.
+1. The implementation of `incompleteItems` may change.
 2. Computation logic occurs in mapStateToProps
 3. Can't memoize the values of `incompleteItems`
 

diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -13,7 +13,7 @@ function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Obje
 }
 ```
 
-Where Items looks like this:
+Where `Items` looks like this:
 
 ```js
 type ItemType = {
@@ -23,7 +23,7 @@ type ItemType = {
 };
 ```
 
-Today we mapStateToProps for all incomplete items like this:
+Today we `mapStateToProps` for all incomplete items like this:
 
 ```js
 function mapStateToProps(state) {
@@ -52,7 +52,7 @@ What is a `selector`?
 1. Selectors can compute derived data, allowing Redux to store the minimal possible state.
 2. Selectors are composable. They can be used as input to other selectors.
 
-Let's turn our filter into a selector.
+Let's turn our filter into a `selector`.
 
 ### Place your selectors near the Redux reducer!!!
 

diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -3,7 +3,7 @@
 Imagine we have a reducer to control a list of items:
 
 ```js
-function listOfItems(state: Array<Object> = [], action = {}) {
+function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
   switch(action.type) {
     case 'SHOW_ALL_ITEMS':
       return action.data.items

diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -49,8 +49,8 @@ After talking with Dan Abramov (founder of Redux) he has been preaching the colo
 
 What is a `selector`?
 
-Selectors can compute derived data, allowing Redux to store the minimal possible state.
-Selectors are composable. They can be used as input to other selectors.
+1. Selectors can compute derived data, allowing Redux to store the minimal possible state.
+2. Selectors are composable. They can be used as input to other selectors.
 
 Let's turn our filter into a selector.
 
@@ -75,4 +75,4 @@ function mapStateToProps(state) {
 ```
 
 Now we can reuse this logic across many components mapping this exact state! We can unit test it as well! 
-More importantly we can now memoize this state with (reselect)[https://github.com/reactjs/reselect]
+More importantly we can now memoize this state with [reselect](https://github.com/reactjs/reselect)
diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -72,4 +72,7 @@ function mapStateToProps(state) {
     incompleteItems: getIncompleteItems(state)
   }
 }
-```
+```
+
+Now we can reuse this logic across many components mapping this exact state! We can unit test it as well! 
+More importantly we can now memoize this state with (reselect)[https://github.com/reactjs/reselect]
diff --git a/reduxSelectorPattern.md b/reduxSelectorPattern.md
@@ -1 +1,75 @@
-## Yo
+## Redux Selector Pattern
+
+Imagine we have a reducer to control a list of items:
+
+```js
+function listOfItems(state: Array<Object> = [], action = {}) {
+  switch(action.type) {
+    case 'SHOW_ALL_ITEMS':
+      return action.data.items
+    default:
+    return state;
+  }
+}
+```
+
+Where Items looks like this:
+
+```js
+type ItemType = {
+  id: string,
+  text: string,
+  completed: boolean
+};
+```
+
+Today we mapStateToProps for all incomplete items like this:
+
+```js
+function mapStateToProps(state) {
+  return {
+    incompleteItems: state.listOfItems.filter((item) => {
+      return !item.completed
+    });
+  }
+}
+```
+
+## The problem with this approach
+
+There are a couple problems with this approach as the application grows.
+
+1. If the implementation of `incompleteItems` may change.
+2. Computation logic occurs in mapStateToProps
+3. Can't memoize the values of `incompleteItems`
+
+## The Solution
+
+After talking with Dan Abramov (founder of Redux) he has been preaching the colocation of functions called `selectors`. 
+
+What is a `selector`?
+
+Selectors can compute derived data, allowing Redux to store the minimal possible state.
+Selectors are composable. They can be used as input to other selectors.
+
+Let's turn our filter into a selector.
+
+### Place your selectors near the Redux reducer!!!
+
+```js
+function getIncompleteItems(state) {
+  return state.listOfItems.filter((item) => {
+    return !item.completed
+  });
+}
+```
+
+And we update our `mapStateToProps` function:
+
+```js
+function mapStateToProps(state) {
+  return {
+    incompleteItems: getIncompleteItems(state)
+  }
+}
+```
diff --git a/hello.md → reduxSelectorPattern.md b/hello.md → reduxSelectorPattern.md
diff --git a/hello.md b/hello.md
@@ -0,0 +1 @@
+## Yo