new in-house thunk-like for async actions

Author: boostup

src/App.js renamed to src/App.jsx

@@ -1,9 +1,18 @@
 import React from "react";
+
 import { useDataLayerValue } from "../context/DataLayer";
+import ButtonComponent from "./ButtonComponent";
 import PrettyPrint from "./PrettyPrint";
 
 function HeaderComponent() {
- const { state } = useDataLayerValue();
+ const { state, thunk } = useDataLayerValue();
+
+ const getChuck = () => {
+ thunk({
+ type: "GET_CHUCK_START",
+ payload: { someValue: "some value" },
+ });
+ };
 
  return (
  <div>
@@ -15,6 +24,14 @@ function HeaderComponent() {
  <div>
  <PrettyPrint toPrint={state} />
  </div>
+ <p></p>
+ <div>
+ <ButtonComponent
+ instructions="Get Chuck Norris (Thunk-like Async action)"
+ onClick={getChuck}
+ />
+ <p>{state.chuckNorris.data.value}</p>
+ </div>
  </div>
  );
 }

src/components/HeaderComponent.jsx

@@ -1,13 +1,16 @@
 import React, { createContext, useContext, useReducer } from "react";
 import { useReactSaga } from "use-react-saga";
-
 import allSagas from "../sagas/rootSagas";
 
+import { createThunkMiddleware } from "../middlewares/thunk";
+import allThunks from "../thunks/rootThunks";
+
 export const DataLayerContext = createContext();
 
 export function DataLayer({ initialState, reducer, children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  const put = useReactSaga({ state, dispatch, saga: allSagas });
+ const thunk = createThunkMiddleware({ dispatch, thunks: allThunks });
 
  return (
  <DataLayerContext.Provider
@@ -17,6 +20,8 @@ export function DataLayer({ initialState, reducer, children }) {
  dispatch,
  //Async actions => for using async functions (of type `generator`), which in turn dispatch an action object, in some unknown amount of time
  put,
+ //
+ thunk,
  }}
  >
  {children}

src/context/DataLayer.jsx

@@ -5,12 +5,14 @@ import { DataLayer } from "./context/DataLayer";
 
 import App from "./App";
 
-import allReducers, { allInitialStates } from "./reducers/rootReducers";
+import combinedReducers, {
+ combinedInitialStates,
+} from "./reducers/rootReducers";
 
 const rootElement = document.getElementById("root");
 ReactDOM.render(
  <React.StrictMode>
- <DataLayer initialState={allInitialStates} reducer={allReducers}>
+ <DataLayer initialState={combinedInitialStates} reducer={combinedReducers}>
  <App />
  </DataLayer>
  ,

src/index.js

@@ -1,4 +1,4 @@
-//A demo middleware
+// A Naive demo middleware
 export function demo(fn) {
  return function (...rest) {
  console.log("Demo middleware", rest);

src/middlewares/demo.js

@@ -1,4 +1,4 @@
-//Logger : A middleware
+//Logger :  A Naive middleware
 export function logger(fn) {
  return function (...rest) {
  console.group(fn.name);

src/middlewares/logger.js

@@ -0,0 +1,10 @@
+export function createThunkMiddleware({ dispatch, thunks }) {
+ //
+ //Naive Thunk-like middleware
+ return async function interceptAction(thunkActionObj) {
+ const actionObj = await thunks[thunkActionObj.type](
+ { payload: thunkActionObj.payload } || null
+ );
+ dispatch({ type: actionObj.type, payload: actionObj.payload });
+ };
+}

src/middlewares/thunk.js

@@ -0,0 +1,15 @@
+export const chuckNorrisInitialState = {
+ data: {},
+};
+
+export function chuckNorrisReducers(state, action) {
+ switch (action.type) {
+ case "GOT_CHUCK":
+ return {
+ ...state,
+ data: action.payload,
+ };
+ default:
+ return state;
+ }
+}

src/reducers/chuckNorris/chuckNorris.reducers.js

@@ -14,10 +14,16 @@ import {
 
 import { uiInitialState, uiReducers } from "./ui/ui.reducers";
 
-export const allInitialStates = {
+import {
+ chuckNorrisInitialState,
+ chuckNorrisReducers,
+} from "./chuckNorris/chuckNorris.reducers";
+
+export const combinedInitialStates = {
  counter1: counter1initialState,
  counter2: counter2initialState,
  ui: uiInitialState,
+ chuckNorris: chuckNorrisInitialState,
 };
 
 export default combineReducers(
@@ -27,6 +33,7 @@ export default combineReducers(
  counter1: counter1Reducers,
  counter2: counter2Reducers,
  ui: uiReducers,
+ chuckNorris: chuckNorrisReducers,
  },
  [
  //Add middlewares here

src/reducers/rootReducers.js

@@ -104,6 +104,7 @@ App > div > div {
  padding: 1rem;
  font-weight: 800;
  cursor: help;
+ text-align: left;
 }
 
 .prettyPrint pre.In {