redux-clean-architecture

Utilities for implementing clean architecture using Redux

Usage no npm install needed!

<script type="module">
  import reduxCleanArchitecture from 'https://cdn.skypack.dev/redux-clean-architecture';
</script>

README

📐 Utilities for implementing clean architecture using Redux 📐
🔩 Focuses on achieving great type inference 🔩
🎯 Easy to navigate, easy to maintain 🎯

This repo aims to be a guide on how to implement Clean Architecture using @reduxjs/toolkit.
The NPM library redux-clean-architecture is a set of type-level utilities that you will need to achieve perfect type inference.

Benefits

  • Clears guideline about how to organize your code in accordance with the clean architecture principles.
  • No need to explicitly call dispatch() on the UI side.
  • Strict isolation between the UI and the core. Port your web app to React Native or switch to another UI framework without having to re-write a single line of the core logic.
  • Stop wondering about how things should be named. Thanks to the use of TypeScript's template literal types Name things once then let intellisense guide you.

https://user-images.githubusercontent.com/6702424/147381177-346293ec-8562-4aa4-ac62-45a5404d7ccc.mov

Install / Import

$ yarn add @reduxjs/toolkit redux-clean-architecture

Examples setups

Canonical setup

A canonical setup can be found here: 👉 src/test/demo-app👈 .

Todos List app

A todo list example can be found 👉here👈.
Credit goes to @leosuncin.

Enterprise grade app

You can consult the source code of onyxia-web to see how redux-clean-architecture is used in a real world complex application.

Onyxia: A data science-oriented container launcher.

Starting the demo app

git clone https://github.com/garronej/redux-clean-architecture
cd redux-clean-architecture
yarn
yarn build
yarn start-demo-app