Uncertain about the distinction between reducers and dispatchers when it comes to handling actions

I'm feeling a bit confused regarding reducers and dispatchers. While both receive actions as parameters, it doesn't necessarily mean that the actions I use in my dispatchers are the same as those used in my reducers, correct?

For example, if I have an action called fetchData, that action will be dispatched but won't actually reach the reducer since it doesn't alter the state.

All the tutorials on redux that I've come across emphasize centralizing all actions in one place. However, I believe we should distinguish between reducersActions and dispatchersActions.

Is there something important that I might be overlooking?

javascripttypescriptdesign-patternsredux

Answer №1

In my opinion, segregating actions into reducersActions and dispatchersAction is possible but not a common practice.

When defining an action, it should be centered around an entity (which has a defined state that is later maintained). The naming conventions of actions should clearly indicate their purpose, as discussed in more detail here.

Having all actions in one place with descriptive names that reflect their intended functionality is sufficient for understanding whether they are meant to update the state through a reducer or initiate further actions through a dispatcher.

In your example of fetchData, its purpose is unclear. Focus on defining states first, and then create actions accordingly. This approach will help clarify the overall structure.

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

Integrate service once the constructor has completed execution

I created a service to connect with the Spotify API. When initializing this service in the constructor, it needs to retrieve the access token by subscribing to an Observable. However, there's an issue: The service is injected into my main component ...

angulartypescriptservicehttpclient

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...

javascriptjqueryhtmlcssgoogle-chrome

Angular 6 - The state of the expression was altered after it was verified, different types of constructions

During the build process in debug mode with ng build, I am encountering errors in some components. However, when I switch to production mode using ng build --prod, these errors disappear. I am curious as to why this discrepancy is occurring. Error: Expre ...

javascriptangulartypescript

Guide to storing user data retrieved from the LinkedIn API into an Angularjs controller with the help of a personalized service

Hey there, I'm currently diving into Angular and facing a challenge with saving user information from LinkedIn API to the controller's scope without directly passing it to my custom service. It seems like that might not align with the best practi ...

javascriptangularjslinkedin-api

Change a CSV string into a JSON array and assign it to a variable

I am working with JSON data that looks like this: [ { "Title": "PAGE A", "Users": "USRA" }, { "Title": "PAGE B", "Users": "USRA,USRB" } ] What is the most efficient method to convert the fields containing " ...

javascriptjsoncsv

Completing Forms with KendoUI Autocomplete

I am currently working with a KendoUI Autocomplete feature within a <form>. One issue I have encountered is that if the user presses the enter key while the autocomplete options are displayed, it only closes the options without submitting the form. S ...

javascriptjqueryformskendo-ui

Create a layout with two rows of two buttons in HTML aligned to the right side while maintaining the left side's

I am currently working on designing a menu for my webpage that includes four buttons. My goal is to have two buttons displayed at the top of the page and two buttons displayed at the bottom. To achieve this, I have written the following CSS code: .navButt ...

javascripthtmlcss

When you include ng-href in a button using AngularJS, it causes a shift in the alignment of the text within the button

Recently, I've been delving into Angularjs with angular-material and encountered a slight issue with ng-href. I created a Toolbar at the top of my webpage, but the moment I include the "ng-href" attribute to a button, the text inside the Button loses ...

javascripthtmlcssangularjs

When defining functions in Typescript, the new() syntax is used

Can you explain the purpose of the type declaration for dialogComponent in this specific Typescript code snippet? createDialog(dialogComponent: { new(): DialogComponent }) : Promise<ComponentRef<DialogComponent>> { ... } (Referenced from ...

angulartypescript

Having trouble getting the onClick event to trigger in ReactJS buttons

The buttons are not functioning as expected, allowing for the addition of positive, neutral, or negative feedback. Interestingly, when I added a default button using different syntax to add negative feedback, it worked. This suggests that there may be an ...

javascriptreactjs

There is no initial value set for the property and it is not definitively assigned in the constructor

I encountered an issue while working on the following code snippet: export class UserComponent implements OnInit { user: User; constructor() { } ngOnInit() { this.user = { firstName : "test", lastName ...

angulartypescript

How to incorporate a routing file within another routing file in Node.js

I have structured my routes as follows: / /business /business/stuff1 /business/stuff2 /business/admin For /business, I am using a separate file for the routing and functions. And similarly, for /business/admin, I also want to use a separate file f ...

javascriptnode.jsexpress

An error occurred while trying to load the resource in the Redux-Saga: connection refused

Utilizing axios allows me to make calls to the backend server, while redux-saga helps in managing side effects from the server seamlessly. import {call, put, takeEvery} from "redux-saga/effects"; import {REQUEST_FAILED, REQUEST_SUCCESS, ROOT_URL, SUBMIT_U ...

javascriptreactjsaxiosredux-saga

Deriving data types based on a variable in TypeScript

If I have a dictionary that links component names to their corresponding components like this: const FC1 = ({prop}: {prop: number}) => <>{prop}</>; const FC2 = ({prop}: {prop: string}) => <>{prop}</>; const mapComponents = [ ...

reactjstypescripttypescript-typingstypescript3.0

Retrieving the value of an inner div upon clicking the outer div

I currently have a collection of button divs, each containing distinct information: <div class="button"> <div id="first"> Johny </div> <div id="second"> Dog </div> <div id="third"> Pasta & ...

javascriptjqueryhtml

Navigate to the specified location using AJAX

When I update a comment using AJAX, I want to automatically scroll down to the updated comment: $("#aggiorna").click(function(){ var value = $("#id").val(); var dato = $("#comment_edit").val(); var dato1 = $("#user_id").val(); var dato2 = ...

javascriptjqueryhtmlajax

Tips for managing CSS/style conflicts in JavaScript/AngularJS applications

I am new to AngularJS and I have a requirement to assign CSS properties to a component at the JavaScript file level. When I debug my code after applying the CSS styles to the component, I can see that all the applied CSS properties are behaving as expected ...

javascriptjqueryhtmlangularjscss

Utilizing Generics in TypeScript to Expand Abstract Classes

How can I define the property eventList in the class ImplTestClass to be an array with all possible values of AllowedEvents, while extending the class TextClass that accepts T? I'm stuck on this one. If anyone can provide guidance on how to achieve t ...

typescripttypescript-generics

What is the most effective way for server.js to send a request to a controller?

When I need to send data from a controller to my main server.js, I typically use the following method: $http.post('/auth/signup', user); This code is executed in the controller: app.post('/auth/signup', function(req, res, next) The ...

javascriptnode.jsangularjsexpress

Is it possible to locate a Typescript class only when there are no references to its properties?

Currently, I am utilizing TypeScript 2.0 within VSCode and although the highlighted errors are being confirmed by the TypeScript compiler, they all point to a module that I am importing: import * as els from 'elasticsearch'; The module elastics ...

node.jstypescript