Experiencing a type error within Redux in a React Native project utilizing TypeScript

I am currently working on implementing a feature to store the boolean value of whether a phone number is verified or not.

Within my login component:

await dispatch(setOTPVerified(data.is_phone_verified));

Action.tsx:

export const OTP_VERIFIED = 'OTP_VERIFIED';
export const setOTPVerified = (OTPVerified: boolean) => {
  return {
    type: OTP_VERIFIED,
    OTPVerified,
  };
};

Reducer.tsx:

export interface ExtrasParams {
  OTPVerified?: any;
}

const initialData: ExtrasParams = {
    OTPVerified: false,
  };

const extrasReducer = (state = initialData, action: any): ExtrasParams => {
    switch (action.type) {
      case OTP_VERIFIED:
        state = {...state, OTPVerified: action.OTPVerified};
        return state;
      default:
        return state;
    }
  };

Saga.tsx:

function* getOTPVerified(action: any) {
  yield put({
    OTPVerified: action.OTPVerified,
  });
}

export default function* extrasSaga() {
  yield takeLatest(OTP_VERIFIED, getOTPVerified);
}

Error in console:

Error: Actions may not have an undefined "type" property. Have you misspelled a constant?
The above error occurred in task getOTPVerified
created by takeLatest(OTP_VERIFIED, getOTPVerified)

I am new to using typescript with react native and still learning about declaring types in redux. I have tried different approaches but am struggling to resolve this error.

Answer №1

The error message clearly indicates the issue at hand. The creator of the effect put(action) expects a redux action following this specific structure:

export interface Action<T = any> {
  type: T
}

According to the documentation for dispatch(action),

Actions must contain a type field that specifies the type of action taking place.

Upon examining the source code, we can observe how the parameter validation for the dispatch() method is handled.

if (typeof action.type === 'undefined') {
  throw new Error(
    'Actions must not have an undefined "type" property. Check for any misspellings in the action type string constant.'
  )
}

It is imperative to include a type field within the action object. Here's an example:

function* getOTPVerified(action: any) {
  yield put({
    type: 'OTP_VERIFIED_SUCCESS',
    OTPVerified: action.OTPVerified,
  });
}

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

Having trouble receiving a blob response using HttpClient POST request in Angular 9?

I'm encountering an issue while attempting to receive a zip file as a blob from an HTTP POST request. However, the resolved post method overload is not what I expected. const options = { responseType: 'blob' as const }; Observable<Blob ...

Using a click event to target the next div and apply a CSS class using Typescript

I am trying to create a Typescript function that will locate the next div and apply a CSS class to it. Here is what I have attempted: <ul> <li><a href="#" onclick="toggle()">Item 1</a></li> <div class="content hide ...

The mat-table's data source is failing to refresh and display the latest

When I click on a column header to sort the table, a function should trigger and update the data. However, the data is not updating as expected. Below is the code for the function and the table: <table mat-table #table [dataSource]="dataSourceMD&qu ...

Output specification: Mandate certain attributes of a designated kind, while permitting them to be incomplete

I am searching for a solution in TypeScript that enforces the return type of a method to be a subset of an interface. Essentially, this means that all properties on the returned object must exist on the interface, but they are not required. Background: De ...

What is the best way to format a text component so that the initial word in each sentence is bolded?

Creating a text component where the first word of the sentence is bold can be a bit tricky. The current solution may result in a messy output like "Tips: favouritevacation" where there is no space after "Tips:". This approach is not very elegant. One pos ...

I am having trouble accessing my JSON data via HTTP get request in Angular 2 when using TypeScript

I am working on developing a JSON file configuration that can be accessed via HTTP GET request in order to retrieve the desired value from the config file and pass it to another component. However, whenever I try to return the value, it shows up as undefin ...

AngularTS - Using $apply stops the controller from initializing

Every time I launch the application, the angular {{ }} tags remain visible. Removing $scope.$apply eliminates the braces and displays the correct value. I am utilizing Angular with Typescript. Controller: module Application.Controllers { export class Te ...

My instance transforms with the arrival of a JSON file

I'm grappling with a query about data types in TypeScript and Angular 2. I defined a class in TypeScript export class product{ public id:number; public name:string; public status:boolean; constructor(){} } and I initialize an instanc ...

Angular 7 TypeScript code not updating value

UPDATE: I'm having trouble with my code not updating the selected value with the new one entered in the input field "newVb". The error message says 'this.newVarde' is undefined when it reaches the line 'this.selectedVarde = this.newVard ...

Discovering different types of navigation in React Navigation using navigationRef

I'm currently working on adding types to my TypeScript version of this function, but I'm facing some difficulties with it. Perusing the React Navigation documentation: // RootNavigation.js import { createNavigationContainerRef } from '@rea ...

An issue has occurred: the function cannot be applied to the intermediate value that is currently being processed

I am currently working on an Angular 5 CRUD application, utilizing Google Firebase services. I have been following a helpful video tutorial on YouTube (link here), but I encountered this error ngOnInit() { var x = this.employeeService.getData(); x.sna ...

What is causing my function to execute twice in all of my components?

One issue I am facing is that I have created three different components with routing. However, when I open these components, they seem to loop twice every time. What could be causing this behavior and how can I resolve it? For instance, in one of the comp ...

Transitioning from componentDidUpdate to Hooks

I am currently in the process of converting this life cycle method into a hook: componentDidUpdate = prevProps => { const { notifications, popNotification } = this.props; if (prevProps.notifications.length >= notifications.length) return; ...

Passing properties to a component from Material UI Tab

I have been attempting to combine react-router with Material-UI V1 Tabs, following guidance from this GitHub issue and this Stack Overflow post, but the solution provided is leading to errors for me. As far as I understand, this is how it should be implem ...

Converting Typescript objects containing arrays into a single array

Looking for some assistance with this problem :) I am trying to convert the object into an array with the following expected result: result = [ { id: 'test-1', message: 'test#1.1' }, { id: 'test-1', mess ...

Instructions for activating the "Navigate to Declaration" feature in TypeScript for JSON files using i18next

Currently, I am actively engaged in a project that involves the use of i18next with react and typescript. In this project, translation keys are defined within .json files. However, a notable drawback of transitioning to json for the translation files is l ...

When attempting to select dates from the picker options, the array is found to be devoid of any entries

My challenge lies in working with an array of dates retrieved from the server to determine which dates should be disabled on the datepicker. getStaffAvailability(){ let x = this; this.$http.get(this.weeklyAvailabilityUrl + "GetAv ...

It takes a brief moment for CSS to fully load and render after a webpage has been loaded

For some reason, CSS is not rendering properly when I load a webpage that was created using React, Next.js, Material UI, and Styled-components. The website is not server-side rendered, but this issue seems similar to what's described here You can see ...

Troubleshooting Typescript compilation using tsc with a locally linked node package

In our project using React/React Native with Typescript, we have a mobile app built with React Native and a shared private package that is utilized by both the React Native client and the React frontend. Due to frequent changes in the shared package, we a ...

Detecting the check status of a checkbox in react native: a complete guide

I'm currently working on a scenario where I need to implement logic for checking or unchecking a checkbox in React Native. If the checkbox is checked, I want to print one string, and if it's unchecked, I want to print something else. How can I ac ...