tf · January 26, 2019 06:57 · Jan 26, 2019 · Jan 26, 2019 · Jan 26, 2019 · Jan 25, 2019
diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -28,8 +28,56 @@
 
 ### Time Slicing
 
+
+
+
+
+
+
+
+
+
+
+
 - Prevent blocking
 
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*  setState
+*  start render
+*  render yield
+|
+|  *  some other event handler
+|
+*  render continue
+*  render yield
+|
+|  *  some other event handler
+|
+*  render continue
+*  render finish
+```
+
+
+
+
+
+
+
+
+
+
 - Prioritized reconciling
 
 
@@ -40,6 +88,34 @@
 
 
 
+```
+*  (low priority event)
+|
+*  setState
+*  start render
+*  render yield
+|
+|  *  (high priority event)
+|  |
+|  *  setState
+|  *  render start
+|  |
+|  *  finish render
+|
+*  re-apply state change
+*  render
+```
+
+
+
+
+
+
+
+
+
+
+
 ### Suspense
 
 - Throwing Promises
@@ -56,6 +132,42 @@
 
 
 
+
+
+
+
+
+```
+*  (event)
+|
+*  setState
+*  start render
+*  render throw promise
+.
+.
+.  *  (event)
+.  |
+.  *  setState
+.  *  render start
+.  *  finish render
+.
+.
+.
+.
+*  promise resolve
+*  re-aplly state change
+*  render
+```
+
+
+
+
+
+
+
+
+
+
 ## Consequences
 
 - React is in charge of state
@@ -107,7 +219,7 @@
 
 
 
-
+```
                                     |   REDUX STORE
                                     |
 *      (low priority event)         |   { users: [] }
@@ -128,6 +240,9 @@
 x  |   cancel render                |
    |                                |
    *     finish render              |
+```
+
+
 
 
 
@@ -217,6 +332,25 @@ React managed state outside the component tree
 
 
 
+```
+const Context = React.createContext(defaultValue);
+
+function Component() {
+  return (
+    <Context.Consumer>
+      {value => /* render something ... */} 
+    </Context.Consumer>
+  );
+}
+```
+
+
+
+
+
+
+
+
 
 
 
@@ -252,6 +386,38 @@ export function useStore() {
 
 
 
+```
+                                    | Context
+                                    |
+*      (low priority event)         |    * { users: [] }
+|                                   |    |
+*      dispatch                     |    |\
+*      Context.write                |    * \  { users: [a,b,c] }
+*      render start                 |    |  \
+*      render yield                 |    |  |
+|                                   |    |  |
+|  *     (high priority event)      |    |  |
+|  |                                |    |  |
+|  *     dispatch                   |    |  |
+|  *     Context.write              |    |  * { expanded: true, users: [] }
+|  *     render start               |    |  /
+|  *     finish render              |    | /
+*                                   |    |/
+*      re-apply state changes       |    *  { expanded: true, users: [a,b,c] }
+*      render
+```
+
+
+
+
+
+
+
+
+
+
+
+
 
 Dependency Injection/Testing
 
@@ -262,6 +428,9 @@ Dependency Injection/Testing
 
 
 
+
+
+
 ```
 <Store.Provider value={...}>
   <TestedComponent />

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -99,8 +99,36 @@
 - Push vs Pull
 
 
-dispatch  -->  store change -->  Provider#setState  --> render  
- ↓
+
+
+
+
+
+
+
+
+
+                                    |   REDUX STORE
+                                    |
+*      (low priority event)         |   { users: [] }
+|                                   |
+*      dispatch                     |
+*      store change                 |   { users: [a,b,c] }
+*      Provider#setState            |
+*      render start                 |
+*      render yield                 |
+|                                   |
+|  *     (high priority event)      |
+|  |                                |
+|  *     dispatch                   |
+|  *     store change               |  { expanded: true, users: [a,b,c] }
+|  *     Provider#setState          |
+|  *     render start               |
+|  |                                |
+x  |   cancel render                |
+   |                                |
+   *     finish render              |
+
 
 
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -76,16 +76,35 @@
 
 ## Redux
 
-- v5 vs v6
 
-- Push vs Pull
 
 
 
 
 
 
 
+- v5: Strore via Context
+
+- v6: State (and Store) via Context 
+
+
+
+
+
+
+
+
+
+- Push vs Pull
+
+
+dispatch  -->  store change -->  Provider#setState  --> render  
+ ↓
+
+
+
+
 
 
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -228,6 +228,30 @@ Dependency Injection/Testing
 
 
 
+## Let Others Take Care of It
+
+
+
+
+
+
+
+
+
+- React Apollo
+
+- Unstated
+
+- Relay?
+
+
+
+
+
+
+
+
+
 ## Thanks!
 
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -46,8 +46,6 @@
 
 - Placeholders
 
-- `lazy`
-
 - `maxDuration`
 
 
@@ -91,6 +89,17 @@
 
 
 
+Component State > Global State
+
+
+
+
+
+
+
+
+
+
 ## Caching External Data
 
 
@@ -130,7 +139,7 @@
 
 
 
-### Global singleton?
+### Global Singleton?
 
 - Risk of tearing
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -1,5 +1,21 @@
+
+
+
+
+
+
+
 # Concurrent React, Redux and State Management
 
+
+
+
+
+
+
+
+
+
 ## Concurrent React
 
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -6,6 +6,10 @@
 
 
 
+
+
+
+
 ### Time Slicing
 
 - Prevent blocking
@@ -15,6 +19,11 @@
 
 
 
+
+
+
+
+
 ### Suspense
 
 - Throwing Promises
@@ -29,6 +38,10 @@
 
 
 
+
+
+
+
 ## Consequences
 
 - React is in charge of state
@@ -43,6 +56,10 @@
 
 
 
+
+
+
+
 ## Redux
 
 - v5 vs v6
@@ -58,13 +75,17 @@
 
 
 
-
 ## Caching External Data
 
 
 
 
 
+
+
+
+
+
 - Prevent re-fetching data 
 
 - Take advantage of concurrent rendering mode
@@ -77,9 +98,10 @@
 
 
 
-### Component State?
 
 
+### Component State?
+
 - Data lost on unmount
 
 - Does not work with suspense
@@ -88,6 +110,10 @@
 
 
 
+
+
+
+
 ### Global singleton?
 
 - Risk of tearing
@@ -98,6 +124,8 @@
 
 
 
+
+
 ### `Context.write`
 
 https://github.com/reactjs/rfcs/pull/89
@@ -108,12 +136,18 @@ https://github.com/reactjs/rfcs/pull/89
 
 
 
+
+
 React managed state outside the component tree
 
 
 
 
 
+
+
+
+
 ```
 const Context = React.createContext(initialValue, contextDidUpdate);
 
@@ -125,6 +159,9 @@ Context.write(prevValue => newValue);
 
 
 
+
+
+
 ```
 const Store = React.createContext(initialState);
 
@@ -141,11 +178,18 @@ export function useStore() {
 
 
 
+
+
+
 Dependency Injection/Testing
 
 
 
 
+
+
+
+
 ```
 <Store.Provider value={...}>
   <TestedComponent />
@@ -155,6 +199,10 @@ Dependency Injection/Testing
 
 
 
+
+
+
+
 ## Thanks!
 
 
@@ -170,6 +218,9 @@ www.codevise.de
 
 
 
+
+
+
 ## References
 
 https://www.youtube.com/watch?v=nLF0n9SACd4

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -155,7 +155,7 @@ Dependency Injection/Testing
 
 
 
-Thanks!
+## Thanks!
 
 
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -114,6 +114,16 @@ React managed state outside the component tree
 
 
 
+```
+const Context = React.createContext(initialValue, contextDidUpdate);
+
+Context.write(newValue);
+
+Context.write(prevValue => newValue);
+```
+
+
+
 
 ```
 const Store = React.createContext(initialState);
@@ -131,6 +141,17 @@ export function useStore() {
 
 
 
+Dependency Injection/Testing
+
+
+
+
+```
+<Store.Provider value={...}>
+  <TestedComponent />
+</Store.Provider>
+```
+
 
 
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -67,7 +67,7 @@
 
 - Prevent re-fetching data 
 
-- Take advantage of of concurrent rendering mode
+- Take advantage of concurrent rendering mode
 
 - Prevent tearing
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -4,6 +4,8 @@
 
 
 
+
+
 ### Time Slicing
 
 - Prevent blocking
@@ -15,23 +17,29 @@
 
 ### Suspense
 
-- Placeholders
-
 - Throwing Promises
 
+- Placeholders
+
 - `lazy`
 
 - `maxDuration`
 
 
+
+
+
 ## Consequences
 
-- React is charge of state
+- React is in charge of state
 
 - Ensures consistent state for tree 
   across time slices (no "tearing")
 
-- Work in progress state
+- "Work in progress" state
+
+
+
 
 
 
@@ -44,44 +52,88 @@
 
 
 
-## Global State?
 
 
 
 
-### Why 
 
-- Caching external data
+
+
+## Caching External Data
+
+
+
+
+
+- Prevent re-fetching data 
+
+- Take advantage of of concurrent rendering mode
+
+- Prevent tearing
+
+
+
 
 
 
 
+### Component State?
 
 
-### Goals
+- Data lost on unmount
 
-- Outside of component tree
+- Does not work with suspense
 
-- Compatible with async mode
 
-- 
 
 
 
-### Where
+### Global singleton?
 
+- Risk of tearing
 
-- Component state?
 
-- Global singleton?
 
-- `Context.write`
+
+
+
+
+### `Context.write`
+
 https://github.com/reactjs/rfcs/pull/89
 
 
 
 
 
+
+
+React managed state outside the component tree
+
+
+
+
+
+
+```
+const Store = React.createContext(initialState);
+
+export function dispatch(action) {
+  Store.write(state => reducer(state, action));
+}
+
+export function useStore() {
+  return useContext(Store);
+}
+```
+
+
+
+
+
+
+
+
 Thanks!
 
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -1,10 +1,10 @@
 # Concurrent React, Redux and State Management
 
-# Concurrent React
+## Concurrent React
 
 
 
-## Time Slicing
+### Time Slicing
 
 - Prevent blocking
 
@@ -13,7 +13,7 @@
 
 
 
-## Suspense
+### Suspense
 
 - Placeholders
 
@@ -89,4 +89,23 @@ Thanks!
 github.com/tf
 @tfischbach
 
-www.codevise.de
+www.codevise.de
+
+
+
+
+
+
+
+## References
+
+https://www.youtube.com/watch?v=nLF0n9SACd4
+
+https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/
+
+https://github.com/reduxjs/react-redux/issues/890
+
+https://github.com/reduxjs/react-redux/pull/1000
+
+https://github.com/reactjs/rfcs/pull/89
+
diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -1,56 +1,82 @@
+# Concurrent React, Redux and State Management
 
+# Concurrent React
 
 
 
+## Time Slicing
 
+- Prevent blocking
 
+- Prioritized reconciling
 
 
 
-# Concurrent React, Redux and State Management
 
+## Suspense
 
+- Placeholders
 
+- Throwing Promises
 
+- `lazy`
 
+- `maxDuration`
 
 
+## Consequences
 
+- React is charge of state
 
-## Concurrent React
+- Ensures consistent state for tree 
+  across time slices (no "tearing")
+
+- Work in progress state
 
 
 
+## Redux
 
+- v5 vs v6
 
+- Push vs Pull
 
 
 
 
-- Prevent blocking
+## Global State?
 
-- Prioritized reconciling
 
 
-## Suspense
 
-- Placeholders
+### Why 
 
-- Throwing Promises
+- Caching external data
 
-- `lazy`
 
-- `maxDuration`
 
-## Consequences
 
-- React is charge of State
 
-## Redux
 
-- Push vs Pull
+### Goals
+
+- Outside of component tree
+
+- Compatible with async mode
+
+- 
+
+
+
+### Where
+
+
+- Component state?
 
+- Global singleton?
 
+- `Context.write`
+https://github.com/reactjs/rfcs/pull/89
 
 
 

diff --git a/concurrent-react-and-redux.md b/concurrent-react-and-redux.md
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+# Concurrent React, Redux and State Management
+
+
+
+
+
+
+
+
+
+## Concurrent React
+
+
+
+
+
+
+
+
+
+- Prevent blocking
+
+- Prioritized reconciling
+
+
+## Suspense
+
+- Placeholders
+
+- Throwing Promises
+
+- `lazy`
+
+- `maxDuration`
+
+## Consequences
+
+- React is charge of State
+
+## Redux
+
+- Push vs Pull
+
+
+
+
+
+
+
+Thanks!
+
+
+
+github.com/tf
+@tfischbach
+
+www.codevise.de
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,21 @@







		# Concurrent React, Redux and State Management










		## Concurrent React
Original file line number	Diff line number	Diff line change
		@@ -155,7 +155,7 @@ Dependency Injection/Testing



		Thanks!
		## Thanks!