redux saga part

docs/markdown/08-states/32-redux-saga.md

@@ -5,3 +5,79 @@
 ##==##
 
 # Redux Saga
+
+![center](./assets/images/redux-saga.png)
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Setup Saga
+
+<!-- prettier-ignore -->
+```typescript [1,5|3|8-9|12]
+import createSagaMiddleware from 'redux-saga';
+
+import appSaga from './sagas';
+
+const sagaMiddleware = createSagaMiddleware()
+const store = configureStore({
+  reducer,
+  middleware: (getDefaultMiddleware) => 
+    getDefaultMiddleware().concat([sagaMiddleware]),
+});
+
+sagaMiddleware.run(appSaga);
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Dispatch some actions
+
+<!-- prettier-ignore -->
+```typescript []
+function TodoList() {
+    const dispatch = useDispatch();
+    useEffect(() => dispatch(navigateTo('/')), []);
+    return <>
+        <Todo onRemoveClick={(id) => dispatch(todosSlice.remove(id))}>
+        <button onClick={() => dispatch(todosSlice.add())}>Add</button>
+    </>
+}
+
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Create a saga
+
+<!-- prettier-ignore -->
+```typescript [13,17|14-16|14|3-11|6|5,7,9]
+import { call, put, takeEvery } from 'redux-saga/effects'
+
+function* fetchTodos(action) {
+   try {
+      yield put({ type: 'loadTodos/fetching' });    
+      const todos = yield call(Api.fetchTodos);
+      yield put({ type: 'loadTodos/successful', todos });    
+   } catch (e) {
+      yield put({type: "loadTodos/failed", message: e.message});
+   }
+}
+
+function* mySaga() {
+  yield takeEvery(navigateTo.type, fetchTodos);
+  yield takeEvery(todosSlice.add.type, /* ... */);
+  yield takeEvery(todosSlice.remove.type, /* ... */);
+}
+```
+
+<!-- .element: class="big-code" -->

steps/api/db.json

@@ -152,7 +152,10 @@
     }
   ],
   "messages": [
-    { "id": "59b53c9015763cd4d9d2a4f2", "type": "info", "text": "New mission for Leanne Woodard at Planet Express" }
-  ],
-  "config": { "apiBaseUrl": "/api", "theme": "pink" }
+    {
+      "id": "59b53c9015763cd4d9d2a4f2",
+      "type": "info",
+      "text": "New mission for Leanne Woodard at Planet Express"
+    }
+  ]
 }