Type definition for Angular 7 ngrx Actions

I have a dynamic action that changes the current configuration:

export class UpdateConfig implements Action {
  readonly type = ActionTypes.UpdateConfig;

  constructor(public payload: { key: string, value: any }) {}
}

The key parameter is the dynamic key of the reducer. For example, consider two different configurations:

interface Config1 {
  myPath1: string
}

interface Config2 {
  myPath2: string
}

These configurations are loaded dynamically in the CurrentConfig reducer. Each configuration has its own effects to handle changes. For instance, the effect for Config1 would look like this:

@Effect()
  updateMyPath1$ = this.actions$.pipe(
    ofType(UpdateMyPath1),
    map((action: UpdateMyPath1) => action.payload.myPath1),
    map(value => {
      return new UpdateConfig({
        key: 'myPath1',
        value,
      });
    })
  );

The issue arises when trying to prevent mistakes like specifying the wrong key in the payload. To address this, I introduced a generic type for the UpdateConfig action. Here's what I tried:

export class UpdateConfig<T> implements Action {
  readonly type = ActionTypes.UpdateConfig;

  constructor(public payload: { key: keyof T, value: any }) {}
}

While this solution works well, I want to enforce the use of this generic type for creating new instances of the class. In other words, I want it to be required. If someone tries to create a new instance without specifying the generic type, an error should be displayed. How can I achieve this requirement?

Answer №1

Today, as I delved into NGRX for the first time, I came across a silly error that turned out to be my fault. In the initial setup, I mistakenly imported Action from the incorrect source. Here's what I had:

import { Action } from "rxjs/internal/scheduler/Action";

Instead of the correct import statement:

import { Action } from "@ngrx/store";

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

How come I am able to send back several elements in react without the need to enclose them in a fragment

This piece of code is functioning properly in React, displaying all the names on the page. However, I am questioning why it is returning multiple elements as a React component. Shouldn't they be wrapped in a single fragment? function App() { const n ...

Embed a function within styled-components that triggers on window.onload

Currently, I'm working on a sidebar that doesn't have its full height. My goal is to calculate the difference between the height of the header and the height of the window screen. const setSidebarHeight = () => { return (window.onload = ( ...

Modify color of chosen item using button event in material ui list

My sidebar contains buttons, and when I click on a button, I want to change its color to indicate it’s selected. However, the color change doesn't always work as expected, sometimes requiring two clicks for it to take effect. Additionally, despite u ...

Trouble with Mangoose Nested Find Functionality

Here is the model I am working with: UserModel = mongoose.Document & { username: string, password: string, records: Record[] }; Record: { name: string; date: Date; } My current query snippet is as follows: const date = new Da ...

Occasionally, the button responds to my touch, but other times it remains unresponsive

Issue: I am facing a problem while working on a project that involves React and Firebase integration. Whenever I press the button in my React application, sometimes it adds the data to Firebase successfully, but other times it doesn't work at all. I ...

What is the best way to use an Infinite scroll plugin to automatically fetch additional data from a database as the user scrolls down

In my Laravel Blade View, I am showcasing around 280 products from the database using the code snippet below. @if (get_setting('best_selling') == 1) <section class="mb-4"> <div class="container"> ...

Commencing CSS Animation Post Full Page Loading

I am looking for a solution using WordPress. In my specific case, I want the CSS Animations to take effect only after the page has completely loaded. For example: click here This is my HTML: <div class="svg-one"> <svg xmlns="ht ...

Convert the checkbox array to comma separated values when serializing the form

I am currently working on a form that includes a dropdown menu and checkboxes: <form id="filter_form"> <select name="type"> <option value="second">second</option> </select> <input type="checkbox" name="city[ ...

Tips for adjusting an svg component to suit various screen sizes

I inserted the following SVG component into my HTML file. It fits perfectly on my tablet, but it's too large for my smartphone. How can we automatically adjust the size of the SVG to fit different screens? <svg viewBox="310 -25 380 450" w ...

Reactjs implemented with Material UI and redux form framework, featuring a password toggle functionality without relying on hooks

Currently, I am working on a react project where I have developed a form framework that wraps Material-UI around Redux Form. If you want to check out the sandbox for this project, you can find it here: https://codesandbox.io/s/romantic-pasteur-nmw92 For ...

Issue occurs when Form does not pass field input to email when utilizing jQuery AJAX PHP

I am currently working on a contact form that utilizes jQuery/AJAX and PHP to send field input values via email. The issue I am facing is that the email being sent only contains the $to and $subject of the PHP mail() function, without any of the actual fie ...

Vue 3 app encountering error due to element having an 'any' type implicitly

I want to incorporate lucidev icons into my component, but I am fairly new to typescript. You can find the lucidev icons here: https://github.com/lucide-icons/lucide <template> <component :is="icon" /> </template> <script ...

Guide on dividing and presenting ajax information into two separate div containers

I am attempting to showcase two sets of data on separate divs using ajax. Below is the code I am utilizing for this task. Here is the ajax implementation $(function () { $(".myBtn").click(function () { var id = $(this).data("id"); ...

Exploring the world of jQuery: Toggling radio buttons with variables on click

On the right side, there is a table of data that initially contains certain values, but can be modified using radio buttons and a slider on the left. If you select the first radio button for the "pay in full" option, it will increase the estimated discoun ...

Is it possible to retrieve the IMEI number of a mobile phone using expo?

Currently working on developing a mobile app with React Native using Expo. I need to figure out a way to access the client's mobile IMEI number and display it in the front end of the app. Unsure of how to accomplish this task. Is there a method to do ...

Steps to include a tooltip on a button that triggers a modal

I am currently utilizing Bootstrap and jQuery to enhance the functionality of components in my application. I am specifically looking to incorporate tooltips into certain elements. The tooltips are implemented through jQuery within my index.html page: < ...

Connecting actions and reducers through promises in React

My current approach involves making two http requests to an API in order to retrieve data. getServerDetails(this.props.match.params.id) //1 .then(res => { this.props.getServerDetailsAction({ success: true, data: res.data }) ...

Is there a way to use jQuery to toggle a child element when the parent is clicked?

There are three images displayed on a webpage, each accompanied by a list of three events. The desired functionality is that when a user clicks on an event, the corresponding information should be displayed below that event. Below is the HTML structure: & ...

API sourced suggestions for autocomplete

I am looking to develop an autocomplete input feature that can fetch places from Google Maps Place API. Here is a sample response I received from this particular API: https://developers.google.com/places/web-service/search#PlaceSearchResponses My main qu ...

Trouble arises when attempting to compare two JSON files with an undefined issue

data-info.json {"price-comparison":[[{"Price":"0.0"},{"Code":"C0358102"}],[{"Price":"2.0"},{"Code":"C0876548"}]],"isEmployeeOJ":"Y"} script.js var dataInfo = $http.get("data/data-info.json").then(function (response) { $scope.dataInfo = response.data; ...