«PoC» React+Redux the Extensible Way

With this article I try to create an extensible version of a Web Application based on React and Redux. Completed

To do so I create first a small example with a few requirements. Those requirements shall be satisfied step by step according the release roadmap.

The sources are also available in the repository your-app-name. The commit history reflects rougly the release roadmap.

Requirements

Req_01:

The user shall be able to interact with the app by entering values and getting calculated values derived from their inputs.

Req_02:

The app shall have a button. When the user presses this button a value is incremented. The button label shows that value. Initial value is 19.

Req_03:

The app shall have a second button. When pressed it retrieves a value from an API call and adds it to its own value which is displayed in the button label. Initial state of the own variable is 76.

Req_04:

The app shall display the sum of the values of ComponentA und ComponentB.

Req_05:

The app shall provide a button to reset the variables to their initial ones.

Release Roadmap

Releases and the Requirements to satisfy:

    Rel_1           Rel_2       Rel_3       Rel_4
---|---------------|-----------|-----------|--------->

    Req_01          Req_01      Req_01      Req_01
    Req_02          Req_02      Req_02      Req_02
                    Req_03      Req_03      Req_03
                                Req_04      Req_04
                                            Req_05

Architectural Design

Concept

The application is built using a modular architecture that allows for easy extension and maintenance. Each component manages its own state and reducers, which are dynamically registered to the store. This approach ensures that the application can scale easily as new features are added.

Components contribute slices to the store

Building Block View

We emphasize modularity and extensibility. Each component manages its own state and reducers, which are dynamically registered to the store. This allows the application to scale easily as new features are added.

Building Block View

Todo

Add description of interfaces between blocks

Runtime View

Todo

Add runtime view

Sequence Diagrams for the “good” and “bad” scenarios

“Good” scenarios:

• «event» Frontend (re)-load

• «event» Backend start

• «event» click on 1st button

• «event» click on 2nd button

“Bad” scenarios:

• «event» click on 2nd button while API is down

Scenario «event» Frontend (re)-load

Frontend (re)-load

Todo

Finish Scenario «event» Frontend (re)-load

Design Alternatives Considered

1. Single Store File: Initially, we considered managing all reducers in a single store/index.js file. However, this approach is not scalable as it requires modifying the store file every time a new reducer is added, leading to tight coupling and reduced maintainability.

2. Manual Reducer Registration: Another approach was to manually register reducers in the store/index.js file. This was rejected because it hinders extensibility. Instead, we opted for a dynamic registration mechanism that allows each component to register its own reducer.

3. Hardcoded Reducers: Hardcoding reducers in the main store configuration was also considered but discarded due to the lack of flexibility. Dynamic registration provides better modularity and allows for lazy loading of reducers.

Traceability Reqs to Architectural Elements

Req_01  is satisfied by   App, Store
Req_02  is satisfied by   ComponentA
Req_03  is satisfied by   ComponentB, Backend
Req_04  is satisfied by   ComponentC
Req_05  is satisfied by   ComponentD

Component            Req01  Req02  Req03  Req04  Req05
=========================================================
Core ----------------------------------------------------
App                   X     (x)    (x)    (X)    (x)
Store                 X
Backend                             X
Extensions ----------------------------------------------
    ComponentA        X      X
    ComponentB        X             X
    ComponentC        X                    X
    ComponentD        X                           X
----------------------------------------------------------


|  X   : Component is responsible to satisfy requirement.
| (x)  : Component needs minor modifications to satisfy requirement

Detailed Design & Construction

Directory structure

-- FRONTEND ---------------------------
/src
    App.js
    index.js
    /store
        reducerManager.js
        store.js
    /components
        /ComponentA
            index.js
            slice.js
        /ComponentB
            index.js
            slice.js
        /ComponentC
            index.js
            slice.js
        /ComponentD
            index.js
            slice.js
---------------------------------------

-- BACKEND ----------------------------
/backend
    __init__.py
    api.py
    app.py
    models.py
---------------------------------------

External Dependencies

Create Skeleton of React Application (creates external dependencies):

npx create-react-app your-app-name
cd your-app-name

Install packages (adds additional external dependencies):

npm install \
    @reduxjs/toolkit \
    react-redux \
    redux-thunk \
    redux-logger \

«component» App

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';

import ComponentA from './components/ComponentA'
import ComponentB from './components/ComponentB'
import ComponentC from './components/ComponentC'
import ComponentD from './components/ComponentD'

const App = () => {
    return (
        <Provider store={store}>
        <ComponentA/>
        <ComponentB/>
        <ComponentC/>
        <ComponentD/>
        </Provider>
    );
};

export default App;

«component» Store

src/store/index.js

import { configureStore } from '@reduxjs/toolkit';
import { thunk } from 'redux-thunk';
import logger from 'redux-logger';
import { createReducerManager } from './reducerManager';

const registerReducer = (key, reducer) => {
    store.reducerManager.add(key, reducer);
    store.replaceReducer(store.reducerManager.reduce);
  };

export { registerReducer };

const initialReducers = {};

const reducerManager = createReducerManager(initialReducers);

const store = configureStore({
  reducer: reducerManager.reduce,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(thunk, logger),
});

store.reducerManager = reducerManager;

export default store;

src/store/reducerManager.js

import { combineReducers } from '@reduxjs/toolkit';

export const createReducerManager = (initialReducers) => {
  const reducers = { ...initialReducers };

  let combinedReducer = combineReducers(reducers);

  return {
    getReducerMap: () => reducers,
    reduce: (state, action) => combinedReducer(state, action),
    add: (key, reducer) => {
      if (!key || reducers[key]) {
        return;
      }

      reducers[key] = reducer;
      combinedReducer = combineReducers(reducers);
    },
    remove: (key) => {
      if (!key || !reducers[key]) {
        return;
      }

      delete reducers[key];
      combinedReducer = combineReducers(reducers);
    },
  };
};

Backend

Create Skeleton of Python/FastAPI Application:

poetry init \
--name your-app-name \
--description "Backend of The Extensible App" \
--author "Calidus Callidus <calidus@callidus.it>" \
--python "^3.8"
--dependency fastapi \
--dependency uvicorn \

File backend/__init__.py is empty.

«Component» App

backend/app.py

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from backend.api import router as api_router

app = FastAPI()

origins = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
    # Add other origins as needed
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

app.include_router(api_router)

if __name__ == "__main__":
    import uvicorn
    uvicorn.run("backend.app:app", host="0.0.0.0", port=8000, reload=True)

«component» Models

backend/models.py

from pydantic import BaseModel

class ValueResponse(BaseModel):
    value: int

«Component» API

backend/api.py

from fastapi import APIRouter
from backend.models import ValueResponse

router = APIRouter()

@router.get("/value", response_model=ValueResponse)
async def get_value():
    return ValueResponse(value=42)

Extensions

Each extension manages its own state and reducers, which are dynamically registered to the store.

«component» ComponentA

src/components/ComponentA/index.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { incrementA } from './slice';

const ComponentA = () => {
  const valueA = useSelector(state => state.ComponentA.valueA);
  const dispatch = useDispatch();

  const incrementValueA = () => dispatch(incrementA());

  return (
     <button onClick={incrementValueA}>
      Increment Value A: {valueA}
      </button>
  );
};

export default ComponentA;

src/components/ComponentA/slice.js

import { createSlice } from '@reduxjs/toolkit';
import { registerReducer } from '../../store';

const initialState = {
  valueA: 19,
};

const componentASlice = createSlice({
  name: 'ComponentA',
  initialState,
  reducers: {
    incrementA(state) {
      state.valueA += 1;
    },
    resetA(state) {
      state.valueA = initialState.valueA;
    },
  },
});

export const { incrementA, resetA } = componentASlice.actions;

// Register the reducer when this module is loaded
registerReducer('ComponentA', componentASlice.reducer);

export default componentASlice.reducer;

«component» ComponentB

src/components/ComponentB/index.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { incrementB } from './slice';

const ComponentB = () => {
  const valueB = useSelector(state => state.ComponentB.valueB);
  const dispatch = useDispatch();

  const fetchValueAndUpdateB = async () => {
    const response = await fetch(`${window.location.origin.replace(/:\d+$/, '')}:8000/value`); // Use the current origin
    const data = await response.json();
    dispatch(incrementB(data.value));
  };

  return (
    <button onClick={fetchValueAndUpdateB}>
      Increment Value B: {valueB}
    </button>
  );
};

export default ComponentB;

src/components/ComponentB/slice.js

import { createSlice } from '@reduxjs/toolkit';
import { registerReducer } from '../../store';

const initialState = {
  valueB: 76,
};

const componentBSlice = createSlice({
  name: 'ComponentB',
  initialState,
  reducers: {
    incrementB(state, action) {
      state.valueB += action.payload;
    },
    resetB(state) {
      state.valueB = initialState.valueB;
    },
  },
});

export const { incrementB, resetB } = componentBSlice.actions;

// Register the reducer when this module is loaded
registerReducer('ComponentB', componentBSlice.reducer);

export default componentBSlice.reducer;

«component» ComponentC

src/components/ComponentC/index.js

import React from 'react';
import { useSelector } from 'react-redux';

const ComponentC = () => {
  const valueA = useSelector(state => state.ComponentA.valueA);
  const valueB = useSelector(state => state.ComponentB.valueB);

  return (
    <div>
      Sum of Values: {valueA + valueB}
    </div>
  );
};

export default ComponentC;

src/components/ComponentC/slice.js

import { createSlice } from '@reduxjs/toolkit';
import { registerReducer } from '../../store';

const initialState = {};

const componentCSlice = createSlice({
  name: 'componentC',
  initialState,
  reducers: {},
});

registerReducer('componentC', componentCSlice.reducer);

export default componentCSlice.reducer;

«component» ComponentD

src/components/ComponentD/index.js

import React from 'react';
import { useDispatch } from 'react-redux';
import { resetA } from '../ComponentA/slice';
import { resetB } from '../ComponentB/slice';

const ComponentD = () => {
  const dispatch = useDispatch();

  const resetValues = () => {
    dispatch(resetA());
    dispatch(resetB());
  };

  return (
    <button onClick={resetValues}>
      Reset Values
    </button>
  );
};

export default ComponentD;

src/components/ComponentD/slice.js

import { createSlice } from '@reduxjs/toolkit';
import { registerReducer } from '../../store';

const initialState = {};

const componentDSlice = createSlice({
  name: 'ComponentD',
  initialState,
  reducers: {},
});

registerReducer('componentD', componentDSlice.reducer);

export default componentDSlice.reducer;

User Guide

Application Start

Start your React application:

# Start Backend
poetry run python -m backend.app

# Start Frontend
npm start

# Ready to go!

Usage

Todo

Add short description on usage

Conclusion

Todo

Add conclusion

«Workshop» Willi-Makers 2024   «PoC» Neighbors Allotment Garden