I'm curious, which redux architecture would you recommend for this specific scenario?

I'm currently developing an application and I'm facing a challenge in implementing Redux effectively in this particular scenario. Unfortunately, due to restrictions at my workplace, normalizing data is not an option.

Let's consider the following 3 views:

1) Displaying a list of folders (retrieved from an API, therefore using a single reducer for this entity).

2) Showing the details of a folder which includes a list of another entity - cats. Additionally, there is a filter form for cats.

3) Viewing a list of cats (similar to the second view but without the folder details). There is also a cats filter form present here.

How should I handle the cats state for both the second and third views? Should I create separate actions like "GET_CATS_FOR_FOLDER" and "GET_CATS" for each respective view (which may not be ideal)? Is there a way to consolidate these actions into one common action? The same question applies to managing the filter form that impacts the cats state.

Thank you in advance!

angulartypescriptreduxngrx

Answer №1

Is it possible to generate distinct selectors that amalgamate the information according to your requirements?

const fetchItems = createSelector(...);

const fetchItem = createSelector(...);

const fetchItemWithDetails = createSelector(...);

const fetchDetails = createSelector(...);

Answer №2

It seems unnecessary to complicate things with reducers, states, stores, and the like.

Instead, consider creating a service (perhaps a singleton if you want to maintain the state).

@Injectable()
export class MyService() {
  folders: { name: string, id: string, cats: any[] }[];

  constructor(private http: HttpClient) {
    this.http.get('api/folders').subscribe(folders => this.folders = folders);
  }
}

With this setup, you can easily use a router to display your views and extract IDs from URLs structured like /#/folders/10/cats/12.

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

Is there a way to access the value of the --base-href parameter in my Angular project during the build process?

In my Angular project, I have set up multiple environments for different stages of development, testing, acceptance, and production. Each environment has a specific base URL, which I designate using the --base-href flag during the project build. However, I ...

angulartypescriptangular-cli

Struggling to run Jest tests on ajax modules that utilize axios

I am facing an issue while testing a function called status from the module ajax.js using Jest. export const status = ({loginUrl='/', logoutUrl='/'}) => { return axios.get(`/auth?login=${loginUrl}&logout=${logoutUrl}`); }; In ...

unit-testingreactjsreduxjestjsaxios

Building a continuous timer loop in Angular using RxJS that adapts to changing durations within an array's objects

I am experimenting with a scenario where I read the data, loop based on the duration. For example, starting with "Adam" first, play Adam for a 15-second timer, then move on to the next beginner "Andy" and play Andy for 15 seconds. Once we reach group "int ...

angulartypescriptrxjsrxjs6

Testing the Express API with MongoDB on a local machine is successful but encounters a timeout issue on CircleCI

I am facing an issue with testing a RESTful API (built with Express in TypeScript) using Jest. The test passes successfully on my local Windows machine but times out on CircleCI. .circleci/config.ylm version: 2.1 jobs: build: docker: - image: ...

typescriptmongodbexpressjestjscircleci

The application component seems to be stuck in a loading state and is not appearing as expected on my index.html

Click here to view the Plunkr <html> <head> <base href="/"> <title>Angular QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <l ...

angular

Is it necessary to import the same .less file into every Angular component template?

Within my angular cli project, the setup includes: angular-cli.json: "styles": [ "styles/styles.less" ], styles.less: @import 'general'; general.less: .pointer { cursor: pointer; } In the component's styles .less file, ...

angularless

Arrange a JSON response in descending order and filter out specific values

Currently, I'm encountering a challenge when trying to extract a specific attribute from my JSON response. The issue arises when I attempt to sort the results based on the `percentage_match` in descending order. Once sorted, my goal is to create an ar ...

arraysangulartypescriptsorting

The system is unable to locate the module at 'C:UsersSanjaiAppDataRoaming pm ode_modulesprotractorinprotractor'. This error originates from internal/modules/cjs/loader.js at line 960

After running "protractor conf.js" without any issues, I decided to install protractor globally using the command "npm install -g protractor". However, after installing protractor globally, I encountered the following error message: internal/modules/cjs/lo ...

javascriptangularnpmprotractor

The Art of Dynamic Component Manipulation in Angular

The current official documentation only demonstrates how to dynamically alter components within an <ng-template> tag. https://angular.io/guide/dynamic-component-loader My goal is to have 3 components: header, section, and footer with the following s ...

htmlangulartypescript

Guide to organizing the table according to the values (timestamps) in a specific column

In one of the tables I'm working with, there is a column called uploadedOn. You can see it in action here: https://stackblitz.com/edit/angular-ivy-tntvst?devToolsHeight=33&file=src/app/app.component.ts 1: https://i.stack.imgur.com/aQ6wh.png. My g ...

angularsortingtimestampangular-material-table

What is the implementation of booleans within the Promise.all() function?

I am looking to implement a functionality like the following: statusReady: boolean = false; jobsReady: boolean = false; ready() { return Promise.all([statusReady, jobsReady]); } ...with the goal of being able to do this later on: this.ready().then(() ...

javascriptangulartypescriptpromise

Is the runTest.ts class in the vscode-test setup ever utilized in the project? Its purpose remains unclear even in the example project

Being a novice to Typescript, JavaScript, and VScode Extensions I have set up a vscode-test following the guidelines provided here: https://code.visualstudio.com/api/working-with-extensions/testing-extension#custom-setup-with-vscodetest Based on the hel ...

javascripttypescriptvisual-studio-codevscode-extensionsvscode-debugger

Error in parsing: Unexpected token encountered. Expected a comma instead. Issue found in React with Typescript

I'm encountering a new error message that I haven't seen before... I've checked my code thoroughly and it seems to be correct, yet the error persists. Here is my code snippet: interface AuthState { token: string; user: User; } interfac ...

reactjstypescript

Confirm the identity of a user by checking their email against the records stored in a MySQL database

I am currently working on creating a user verification system using email that is stored in a mySql database and utilizing express JS. The user is required to input their email before filling out any other forms. If the email is not found in the email tabl ...

mysqlnode.jsangulartypescriptexpress

When using TypeScript, how can I effectively utilize the Component property obtained from connect()?

Software Development Environment TypeScript 2.8 React 16 Redux Foo.tsx interface IFooProps{ userId:number } class Foo extends Component<IFooProps>{ render(){ return <p>foo...</p> } } const mapStateToProps = (state: I ...

reactjstypescriptredux

One-Of-A-Kind Typescript Singleton Featuring the Execute Method

Is it feasible to create a singleton or regular instance that requires calling a specific method? For instance: logger.instance().setup({ logs: true }); OR new logger(); logger.setup({ logs: true }); If attempting to call the logger without chaining the ...

javascriptnode.jstypescriptexpressoop

How can I integrate a timer into an Angular carousel feature?

I have put together a carousel based on a tutorial I found on a website. Check out the HTML code for my carousel below: <div class="row carousel" (mouseover)="mouseCheck()"> <!-- For the prev control button ...

htmlcssangulartypescriptcarousel

Are multiple click events needed for identical buttons?

In my component, there is an HTML structure like this: <div id="catalogo" class="container"> <div class="row"> <div *ngFor="let artista of artistas" class="col-sm" style="mar ...

angulartypescript

What is the best way to utilize imported classes, functions, and variables within an Angular 2 template?

I've come up with a solution for incorporating static content into a template, but I'm unsure if it's the best approach. I would like to know if there is an official or more efficient method of achieving this. Here's an example showcas ...

angulartypescriptangular2-template

Utilizing service-based global objects in Angular applications

Upon entry into my application, the GlobalApplicationController initializes several services that are utilized throughout the entire application, such as subscribing to sockets. It would be quite beneficial to have a CurrentUser object available - however, ...

javascriptangularjsangular