Comparing Redux and MVC models in software architecture

A new project is on the horizon, and the Product Owner has suggested using Redux for state management.

However, I am hesitant to embrace this suggestion as I fail to see the advantages compared to a model-based approach.

For instance, instead of utilizing plain objects in the store, reducers for computed properties, and actions for mutations, I prefer defining these functionalities directly within the models:

class User {
    id = 'ec3d17a2-edee-48e6-b1cd-8f042a9e2a17'
    firstname = 'Jon'
    lastname = 'Doe'
    get fullname() {
        return this.firstname + ' ' + this.lastname
    }
    destroy() {
        axios.delete('/users/'+this.id)
        ...
    }
}

Common arguments found in blog posts supporting Redux include:

  • Redux shines in large applications/teams
  • Centralizing all logic in one place facilitates better organization

Despite these claims, I personally find it more straightforward to structure code and navigate through my project with the outlined model-based system.

I've grown weary of clients who insist on adopting specific technology stacks, believing that flux/redux is the only "professional" path forward after reading about it. Convincing others that redux may not always be the optimal choice for projects in their early stages has proven challenging. Expressing concerns over its potential negative impact on development speed without substantial benefits at a smaller scale could mistakenly be perceived as laziness rather than pragmatic decision-making.

Answer №1

Your critique holds validity to some extent. If developers are comfortable with MVC and have successfully used it in previous projects, why take the risk of diving into unfamiliar territory?

However, where redux excels is in simplifying the understanding of complex app behavior, even for smaller or medium-scale projects. Being able to set breakpoints in the code and track a history of actions in your development tools offers a more seamless flow of execution. It also promotes following a unidirectional flow throughout the entire application. Transitioning between pure states is much easier to follow than trying to piece together where data is stored in your code and which components make certain calls. Everything feels less scattered and haphazard.

Of course, redux may not be the right fit for every team or project scope. There are certainly limitations and trade-offs, as noted by Dan Abramov himself: https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing me from adding members to an imported declaration?

Currently, I am attempting to include a constructor in an imported declaration. As per the information provided in the documentation, this should be feasible. (Refer to Chapter Adding using an interface) Below is the code snippet that I have used: import ...

Having difficulty importing SVG files into the canvas

I'm encountering difficulties when attempting to import SVGs to the canvas and use setZoom() with FabricJS. I am currently working with version "2.0.0.rc4". I have made attempts to import them using two different methods, each with its own set of cha ...

How to call parent properties within an angular.forEach loop

Creating an object named "d" with properties "firstName" and "lastName": var d={ a:"firstName", b:"lastName" }; Next, creating another object named "A" which inherits properties from object "d": var A=Object.create(d); console.log(A.a);//output: "f ...

Sending user input from an input field to a Node JS backend using AJAX for implementing typeahead feature

Implementing a typeahead functionality can be quite challenging, but with the right code, it can be achieved effortlessly. Here is an example of the HTML page: ... ... <input id="product" name="product" type="text" class="form-control" placeholde ...

You cannot use ca.select(....).from function after the code has been minified

My Angular application utilizes squel.js and functions correctly in development mode. However, upon building the app for production and attempting to use it, I encounter the following error message: ca.select(...).from is not a function This error ref ...

Having trouble initializing defaultValue in redux-form-material-ui TextField

I'm encountering an issue where I cannot set a default value for the textField component. Despite trying to use the default value property, it doesn't seem to work when I'm using redux-form-material-ui. I'm struggling to understand wha ...

Control and manage AJAX POST requests in the controller

I'm currently working on implementing an ajax post request feature in my project. The goal is to have a button on my html page trigger a javascript event listener, which then initiates an ajax post request to receive some text data. However, I seem to ...

"Encountering a TypeScript error when using React Query's useInfiniteQuery

I am currently utilizing the pokeApi in combination with axios to retrieve data import axios from 'axios' export const fetchPokemonData = async ({ pageParam = "https://pokeapi.co/api/v2/pokemon?offset=0&limit=20" }) => { try ...

What is preventing me from installing react-router-transition on the 1.4.0 version?

$ npm install -S <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dffe8eceef9a0ffe2f8f9e8ffa0f9ffece3fee4f9e4e2e3cdbca3b9a3bd">[email protected]</a> npm ERROR! code ERESOLVE npm ERROR! Unable to r ...

Error in Angular 4: Unexpected 'undefined' provided instead of a stream

I encountered an issue while attempting to make a HTTP Post request. The error message I received is as follows: auth.service.ts?c694:156 Something went wrong requesting a new password, error message: You provided 'undefined' where a stream ...

Postpone the inclusion of html files within ng-include in AngularJS

I need to optimize the startup performance of my app by delaying the loading of a series of HTML files that are being included into my main controller. These files are not needed for at least 4 seconds while one specific HTML file processes. How can I de ...

Escape from an iframe with the help of a buster

My website is being targeted by a code that prevents it from breaking out of an iframe. Despite trying different frame breaker scripts, I have not been successful in resolving this issue. Any assistance would be greatly appreciated. Thanks! Buster: func ...

What is the reason behind the non-exportation of actions in Redux Toolkit for ReactJS?

Currently, I am utilizing @reduxjs/toolkit along with reactjs to create a shopping cart feature. However, I am encountering an issue when attempting to export actions from Cart.js and import them into other files like cart.jsx and header.jsx. The error mes ...

React, NextJS, and Redux Encounter Local Storage Glitch

I'm currently working on an app that is experiencing a bug when storing data in the local storage of a browser. The variables are successfully sent to the local storage, however, every time the page is refreshed, these variables reset. I initially ex ...

If I include the Next.js Image component within a React hook, it may trigger the error message "Attempting to update state on an unmounted component in React."

My UI layout needs to change when the window width changes. However, when I add an Image (Nextjs component) in my hook, I encounter an error message. I am not sure why adding Image (Nextjs component) is causing this problem. The error message is display ...

Display real-time information fetched from sessionStorage (in JSON format) on a Listview widget

In my session, I have the following JSON data stored: Prescription: [{"medID":"id1","medName":"name1","medQty":"qty1","medDirec":"Directions1"}, {"medID":"id2","medName":"name2","medQty":"qty2","medDirec":"Directions2"}] I am looking to automatically dis ...

Obtain the key's name from the select query

My task is to populate a select element from JSON data, but the challenge lies in the formatting of the JSON where the keys contain important information. I do not have control over how the data is structured. I am attempting to iterate through the JSON a ...

Failed to cast value "undefined" to ObjectId in the "_id" path for the model "User"

I've been encountering an issue that I can't seem to resolve despite searching on Stack and Google. My ProfileScreen.js is meant to display a user's profile, but when attempting to view the profile, I receive this error: "Cast to ObjectId fa ...

Why is my npm installation generating an ERESOLVE error specifically linked to karma-jasmine-html-reporter?

Could someone help me understand this dependency error I encountered while running npm install and provide guidance on how to resolve such errors? View Error Screenshot I am currently using Angular 16, the latest stable version. npm ERR! code ERESOLVE ...

Using the .map method to index an array is causing issues in Node.js

Hey everyone, I'm struggling to properly index a JSON array using the map function. It seems like my code isn't quite right. This is what I have: var entireHTMLssssq = lloopmois.map((result, index) => `<div id=${index} style="position: a ...