redux compose

Author: rohan-paul

React/controlled-unContolled-Component.md

@@ -32,6 +32,8 @@ class ControlledForm extends Component {
 }
 ```
 
+#### A user types into the input box → onChange is triggered invoking the updateUsername function. → the state of our component is set to a new value → React re-renders the virtual DOM → React Diffs the change → Real DOM is updated.
+
 An uncontrolled component is where your form data is handled by the DOM, instead of inside your React component.
 
 You use refs to accomplish this.

Redux/compose.md

@@ -1,3 +1,36 @@
+Compose is used when you want to pass multiple store enhancers to the store. Store enhancers are higher order functions that add some extra functionality to the store. The only store enhancer which is supplied with Redux by default is applyMiddleware however many other are available.
+
+Store Enhancers are Higher Order Functions
+
+What are higher order functions? Paraphrased from the Haskell docs:
+
+Higher order functions can take functions as parameters and return functions as return values. A function that does either of those is called a higher order function
+
+From the Redux docs:
+
+All compose does is let you write deeply nested function transformations without the rightward drift of the code. Don’t give it too much credit!
+
+From the Redux docs if we don't use compose we would have
+
+```js
+finalCreateStore = applyMiddleware(middleware)(
+      require('redux-devtools').devTools()(
+       require('redux-devtools').persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))()
+     )
+     )(createStore);
+```
+### Whereas if we use compose
+
+```js
+finalCreateStore = compose(
+    applyMiddleware(...middleware),
+    require('redux-devtools').devTools(),
+    require('redux-devtools').persistState(
+      window.location.href.match(/[?&]debug_session=([^&]+)\b/)
+    )
+  )(createStore);
+```
+
 
 ```js
 const {
@@ -16,4 +49,22 @@ const composeAllThreeFromRightToLeft = compose(makeLouder, embolden, repeatThree
 
 ```
 
-composeAllThreeFromRightToLeft('Hello!') will output "<B>HELLO!HELLO!HELLO!</B>"
+composeAllThreeFromRightToLeft('Hello!') will output "<B>HELLO!HELLO!HELLO!</B>"
+
+
+### Compose another example - Here is a very simple example of a function that composes two functions to return a new specialized function:
+
+```js
+var greet = function(x) { return `Hello, ${ x }` };
+var emote = function(x) { return `${x} :)` };
+
+var compose = function(f, g) {
+  return function(x) {
+    return f(g(x));
+  }
+}
+
+var happyGreeting = compose(greet, emote);
+console.log(happyGreeting("Mark"));  // => "Mark"
+
+```

Redux/redux-thunk-what-is-thunk-in-programming.md

@@ -1,6 +1,6 @@
 ## 1> What are Thunks?
 
-The precise definition of a “thunk” varies across contexts. Generally though, thunks are a functional programming technique used to delay computation. Instead of performing some work now, you produce a function body or unevaluated expression (the “thunk”) which can optionally be used to perform the work later. Compare:
+Thunks are a functional programming technique used to delay computation. Instead of performing some work now, you produce a function body or unevaluated expression (the “thunk”) which can optionally be used to perform the work later. Compare:
 
 ```js
 // Eager version
@@ -42,7 +42,6 @@ https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
 
 
 
-
 2> In computer programming, a thunk is a subroutine used to inject an additional calculation into another subroutine. Thunks are primarily used to delay a calculation until its result is needed, or to insert operations at the beginning or end of the other subroutine. They have a variety of other applications in compiler code generation and modular programming.
 
 https://en.wikipedia.org/wiki/Thunk