I'm having trouble with this Redux Saga Selector - it's not working as expected. I'm struggling to retrieve the state

I am currently developing an app using React with Redux, Saga, and Typescript.

The structure of the app is such that each primary top-level container component has a corresponding file in a Store directory where its action creators, reducers, and sagas are defined.

At the start of the app, all reducers are combined from the Store files, and the Sagas are combined into a central rootSaga function.

Everything was working fine until I attempted to use a selector to load some state properties into one of my Sagas. Despite not receiving any errors, my selector function is failing to return the state values.

When I try to use the getState() function in my Store file, I encounter a Typescript error stating 'Cannot find the name getState'.

It seems like there might be an issue with either including the correct library in my Store file or calling the state function with the right namespace, but I'm struggling to identify the problem.

Previously, I switched from Thunk middleware to using Saga. With Thunk wired into the app, I was able to successfully use getState in the Store file.

This is the Store file containing my action creators, reducers, and sagas.

My selector function is also included in the file (export const getVersionQueueFilters):

import { fetch, addTask } from 'domain-task';
import { Action, Reducer, ActionCreator } from 'redux';
import { takeLatest, takeEvery } from "redux-saga"
import { call, put, take, race, select } from "redux-saga/effects"
import * as moment from 'moment';

// Rest of the content remains the same...

The selector is utilized within the saga function "versionPoller()".

In essence, I am polling my API for updated data, requiring the passing of at least a default set of filter values. My intention is to utilize the filter values currently stored in the state for this purpose.

I have also attempted defining my selector function as:

export const getVersionQueueFilters = getState().ASVersionQueueState.versionQueueFilter;

However, this approach results in the error 'cannot find the name getState'.

Could you provide any insight into what I might be doing incorrectly?

Answer №1

A function named select is used with a callback:

const fetchCallback = data => data.asQueueRequest.queueFilter
const queueFilters = yield select(fetchCallback)

Answer №2

It appears that my understanding of how the saga select feature operates was mistaken.

In the code snippet below:

export function* versionPoller() {
    const versionQueueFilters = yield select(getVersionQueueFilters);
    try {
        yield call(delay, versionQueuePollDelay);
        yield put(actionCreators.pollVersions() );
    } catch (error) {
        // cancellation error
        return;
    }
}

What I actually needed to do was:

const state = yield select();
const versionQueueFilters = state.asVersionQueue.versionQueueFilter;

The parameter I was passing to the select function wasn't retrieving any data, but when left blank, it returns the entire state tree.

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

Hold off until the asynchronous function has completed - Ionic2

I am developing in Ionic2 and encountering an issue: Within my component, there is a method called drawPlayer that fetches data from a Firebase database. Here is the code for this method: drawPlayer(){ this.playerData.drawThePlayer().on('value&a ...

The logic behind combining elements from two arrays in JavaScript/TypeScript

Explanation of two different array formats const arr1 = [ { "elementName": "one" }, { "elementName": "two" } ] const arr2 = [ { "type": "RPT_PROPERTY_DEMOGRP", "values": [ { "label": "HH" }, { " ...

How to bring in a class that was exported using `export = uuid` in Typescript

I'm facing a challenge while working with the node_module called uuid-js in TypeScript. After installing both the module and its typings, I am unsure how to properly import the module. Question: What is the correct way to import the module? The func ...

Tips for Crafting a Mutation Response Evaluation

When I execute a graphql mutation, the code looks like this: interface SignInReponse { loginEmail : { accessToken: string; } } const [login] = useMutation<SignInReponse>(LOGIN); This is how the mutation appears in the schema: loginEmail( ...

Issue with updating the div to show the user's submission form in Angular is causing difficulties

After a user submits a form, I would like to display their submission by hiding the form area and showing the response in that same area. Upon submitting the form, my goal is to show a mat-spinner until a response is received from the server. The compone ...

When creating an async function, the type of return value must be the universal Promise<T> type

https://i.stack.imgur.com/MhNuX.png Can you explain why TSlint continues to show the error message "The return type of an async function or method must be the global Promise type"? I'm confused about what the issue might be. UPDATE: https://i.stac ...

Converting an Observable<boolean> to a boolean value in RXJS without subscribing

How can I transform an Observable into a boolean value? Is there a common operator that can achieve this task? I've looked for solutions but haven't come across any. Appreciate the help. ...

Using Typescript to import an npm package that lacks a definition file

I am facing an issue with an npm package (@salesforce/canvas-js-sdk) as it doesn't come with a Typescript definition file. Since I am using React, I have been using the "import from" syntax to bring in dependencies. Visual Studio is not happy about th ...

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

What is the process for extracting the paths of component files from an Angular ngModule file?

I've been on the lookout for automation options to streamline the process of refactoring an Angular application, as doing it manually can be quite tedious. We're working on reducing our app's shared module by extracting components/directive ...

The latest version of Typescript, 2.4, is causing errors during compilation when using basic generics

I have been attempting to update a project from TypeScript 2.3 to 2.4, but the process has become quite frustrating and perplexing. I am encountering errors related to generics that are proving difficult to comprehend. To simplify the issue, I have extrac ...

When comparing TypeScript index signatures to Record<Keys, Type> return type, the focus is on handling objects with unspecified properties

I have a function called getQueryParams that takes a string as input and returns an object with unknown properties: function getQueryParams(s) { if (!s || typeof s !== 'string' || s.length < 2) { return {} } return s .substr(1) ...

Unable to access due to CORS restriction on Express server

Whenever I attempt to send a POST api request to my express server, I encounter the following error message. Access to XMLHttpRequest at 'localhost:8081/application' from origin 'localhost:8083' has been blocked by CORS policy: No &apos ...

Obtain merged types by accessing a particular property within a deeply nested object

My query is reminiscent of a post on Stack Overflow titled Get all value types of a double-nested object in TypeScript However, my specific requirement involves extracting union types from the values of a designated property. const tabsEnum = { IDCardRe ...

What could be preventing the nesting of observables from functioning properly in Ionic-Angular?

Working with Observables has been an interesting experiment for me, but I'm facing an issue that I can't seem to resolve. While all the methods work perfectly fine when called outside the pipe, the problem arises when I nest them like this: creat ...

Control or restrict attention towards a particular shape

Greetings! I am seeking guidance on how to manage or block focus within a specific section of a form. Within the #sliderContainer, there are 4 forms. When one form is validated, we transition to the next form. <div #sliderContainer class="relativ ...

"Alert in Javascript executing prematurely prior to initiating the function for sending a get request

private validateURL(url: string) { let isValid = false; this.$http.get(url).then( (data) => { console.log('success'); isValid = true; } ).catch( (reason) => { console. ...

Applying a consistent Selection Filter across multiple routes using identical data but varying selections

Included in the main screen are Selection Filters, which consist of 3 levels: Country, Cities, and Recreations. These filters need to be consistent across all routes, with "select all" at all levels upon initial load. However, a new route has been introd ...

Guide on how to import or merge JavaScript files depending on their references

As I work on my MVC 6 app, I am exploring a new approach to replacing the older js/css bundling & minification system. My goal is to generate a single javascript file that can be easily referenced in my HTML. However, this javascript file needs to be speci ...

I'm seeking assistance in grasping the concept of the useState generic definition. Can anyone help

I recently came across a new definition for useState generics in a TS course, but it was briefly covered and I'm still struggling to fully grasp it. function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>&g ...