4

I am at the beginning of an enterprise level application with 2 years of developing in front of me, and I was wondering how to organize my code while having in mind that the project will be huge and long.

I have created an architecture that I currently believe has potential but I’m not sure since I wasn’t able to find anybody that writes code that way, and also it’s against the paradigm that you can find in redux-toolkit documentation.

Let’s start with a short explanation on what I am trying to achieve. I want to make redux-toolkit easily replaceable in the future. I want to write 80% of my code decoupled from react and redux-toolkit and only look at them like external libraries, one for presentation layer and other for state management. I won’t go into details about the application, domain and infrastructure separation. I think you can find many articles and blogs easily about DDD and clean architecture. Let’s see what I have so far, this is the plan:

enter image description here This is the big picture, so ui layer(component) fires redux-toolkit action / custom hook / custom action/ someOtherLib action. Actions have a responsibility to inject setState and getState callbacks (that IStateManagment domain Interface requires) and also responsibility to call certain usecases.

After this happens, usecase (userStory) gets a copy of the state from getState callback and implements all of the business logic (mutates state copy) and at the end calls setState callback. It also has a dependency on the domain layer, that contains model and logic attached to that model. And finally reducer detects action fired from setState callback and stores new state to the state management.

I would also like to share more on how I’ve implemented this with redux-toolkit and custom hook local store (I’ve also implemented this with custom store implementation but I won’t talk about that, but you can find it on github).

I’ve implemented multiple state management stores on purpose to test how easily I can replace it inside my react components.

This is the implementation of dispatching (or calling custom hook for localstate):

enter image description here

Next is Domain state management interface, it defines what must be provided by external state management:

enter image description here

Next is calling the usecase, action creators have a responsibility to call certain usecases:

enter image description here

After that we have a usecase where all the business logic is implemented in one place:

enter image description here

enter image description here

And at the end single reducer to handle setState action:

enter image description here

You can find whole projects with 3 different state managements on github: https://github.com/WingsDevelopment/react-clean-architecture

I know this is much, but I tried to share this as clear as possible. I am concerned about making the decision to go down this road. I am not sure what are cons of this approach and if I am missing something and if so, what?

5
  • Hey, Did you get more information on this question? Can you share what solution you have come up with? Dec 1, 2022 at 13:20
  • Well it really depends on a project and it's not easy to articulate in single comment, but I would say, if you are using redux, u kinda have to commit to it, and not make some abstraction around it, because you won't be replacing redux with something else that have same abstraction... It's good to have Dependency Injection contexts for your services, loggers,data fetchers and other implementations, because you can easly replace that and you might really have a need for that replacement... Maybe if you share a little more details about your project i could be more specific...
    – Wings
    Dec 1, 2022 at 13:56
  • Bottom line: There is not single best architecture, architecture is always tradeoff
    – Wings
    Dec 1, 2022 at 13:57
  • In my project a I think I can hide the Redux state behind use case interactor classes so only they have access to it and they do some business logic and pass the result to the viewModel and then to the pure view which will display the data. I try to apply clean architecture but not sure how correct this approach is. @Wings Dec 1, 2022 at 14:28
  • 1
    I know, well Redux is not just a library its also paradigm, and it has his architecture opinion that is hard not to follow... I found myself much more enjoying react-query, and its much much more easier to create your own architecture with it. You should check it out... Contexts are enough for just front-end state, you can also use react-query cache for state and I think unless you are not creating some game or something with huge front-end state, its probably better to go react-query path...
    – Wings
    Dec 5, 2022 at 22:01

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.