Tips for effectively using the Redux compose function

How can I correctly use Redux compose to type my component like this:

compose(
  withOneThing,
  withSecondThing,
  connect<type1, type2>(mapStateToProps, mapDispatchToProps),
)(MyComp)

I have been using a hack like this:

as React.FC<PROPS>

Sometimes, however, this is not possible and I resort to something like this:

 compose<any>(
      withOneThing,
      withSecondThing,
      connect<type1, type2>(mapStateToProps, mapDispatchToProps),
    )(MyComp)

Is there a way to properly type compose without relying on external libraries like recompose?

typescriptreduxreact-redux

Answer №1

My current preferred method is as follows:

 combine<firstType, secondType, connectionType, MyComponentType>(
  firstThing,
  secondThing,
  connect<typeA, typeB>(mapState, mapDispatch),
)(MyComponent)

If you have a more effective approach, please do let me know.

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

Unleashing the full power of TypeScript: Harnessing Array.prototype.reduce with Generics

Attempting to standardize data using Array.prototype.reduce. Puzzled by how I can bypass "type-checking" in the reduce function. My interfaces: interface Dict<T> { [key:string]: T; } interface InnerData { id: string; value: number; } inter ...

arraystypescriptgenericsnormalizationreduce

Transform JSON into a TypeScript interface with a specialized Date method

Within my Angular 7 project, there is a Post Model defined as follows: export interface PostModel { id: number; created: Date; published: boolean; title: string; } I have implemented an Angular service method aimed at retrieving posts: public g ...

angulartypescriptangular6angular7

Using FullCalendar within an Ionic3 framework powered by Angular 4

Is there a way to initialize fullCalendar in an event (such as a click) on Ionic 3, using Angular 4? This code works when the calendar options are set in a variable: calendarOptions: Object = { fixedWeekCount: true, editable: true }; However, ...

angulartypescriptionic2fullcalendar

Allowing TypeScript to provide a warning when trying to access the first element of an array that may be

const testArray: string[] = []; testArray[0].length The current implementation does not trigger a TypeScript error. What can be done to properly handle cases where a string may not exist at a specific index? ...

typescript

React does not rely on Redux for data fetching

I'm facing an issue with my Redux implementation. In my app, I am creating members through one route and uploading their images to MongoDB through another route. However, when trying to fetch members and images based on each member's name, I enco ...

reactjsmongodbreduxuse-effectmern

Definitions for images in the following format

I am currently utilizing typescript in conjunction with NextJs and next-images. Here is the code snippet: import css from "./style.sass"; import img from './logo.svg'; import Link from 'next/link'; export default () => <Link hre ...

typescriptnext.js

MUI Chips serving as selectible tags with checkbox-like functionality

I have retrieved data from a JSON file containing information about different types of chips: [ { "id": "4", "name": "Caucasian" }, { "id": "5", "name": "Asian" }, ...

reactjsjsontypescriptmaterial-ui

Struggling to locate a declaration file for the 'cloudinary-react' module? Consider running `npm i --save-dev @types/cloudinary-react` or exploring other options to resolve this issue

Currently, I am working with Typescript in React. Strangely, when I try to import the following: import { Image } from 'cloudinary-react'; I encounter this error: Could not find a declaration file for module 'cloudinary-react'. ' ...

reactjstypescriptcloudinary

Create a custom React hook that logs the start of a page render event

In order to enhance performance monitoring in my React JS app, I am developing a logging framework. The SDK provides two methods for creating a time event and stopping the timer to push timing details wherever necessary. To capture data fetching activities ...

reactjsreduxreact-reduxreact-hooks

Angular encountered an error when trying to access the property "fruits" of an undefined object

When working with Angular, I encountered an issue where I received the error message "cannot read property 'fruits' of undefined." Within my class definition, I have included the following: export class MyClass implements OnInit { fruits: any[] ...

arraysangulartypescriptangular7

Electron and React: Alert - Exceeded MaxListenersWarning: Potential memory leak detected in EventEmitter. [EventEmitter] has 21 updateDeviceList listeners added to it

I've been tirelessly searching to understand the root cause of this issue, and I believe I'm getting closer to unraveling the mystery. My method involves using USB detection to track the connection of USB devices: usbDetect.on('add', () ...

javascriptnode.jsreactjstypescriptelectron

steps for creating a route with @input

I have created a component that utilizes an HTML attribute. I set it up so that users can specify the route when using this component within another component. However, every time I attempt to define the route value, I encounter a 'No provider for Rou ...

angulartypescriptangularjs-directive

Implementing RTKQuery queryFn in TypeScript: A comprehensive guide

Important update: The issue is now resolved in RTKQuery v2 after converting to TypeScript. See the original question below. Brief summary I am encountering an error while trying to compile the TypeScript code snippet below. Tsc is indicating that the r ...

typescriptreact-reduxredux-toolkitrtk-query

The category of properties cannot be assigned to the data type 'string'

Within my codebase, there exists a component known as StepperTile. This component has the ability to accept two specific props: title_part_1 title_part_2 However, when attempting to render this component, I encountered an error within the StepperTile fil ...

reactjstypescript

Google Cloud Run encountered an error: connection timed out while connecting with TCPConnectWrap.afterConnect

Encountering issues with Google Cloud Run and Sendgrid. Whenever attempting to send an email using the Sendgrid API, an error message appears after a short period of time: Error: connect ETIMEDOUT at TCPConnectWrap.afterConnect. It's unclear if this i ...

expressgoogle-cloud-platformreact-reduxsendgridgoogle-cloud-run

Stop watching a stream of data when it reaches a specific value

Is there a way to automatically unsubscribe from an observable upon receiving a specific value? For example: let tempSub: Subscription = this.observable$.subscribe(value => { if (value === 'somethingSpecific') { tempSub.unsubscrib ...

javascripttypescriptrxjsreactive-programming

Submitting a form in Angular 2 triggers a page refresh

I'm currently using an Angular2 template to build a form. Whenever I click on the button, the page refreshes. Fortunately, my validations are functioning properly. Is there any way to prevent the page from refreshing when the user clicks the button ...

angulartypescript

What is the best way to employ the pick function with optional types within nested TypeScript structures?

I am interested in learning TypeScript. dynamicContent?: { data?: { attributes?: { baccarat?: { title?: string | null; content?: string | null } | null; baccaratOnline?: { title?: string | null; content?: string | null } | null; ...

typescript

DuplicateModelError: Unable to duplicate model after it has been compiled, React.js, MongoDB, TypeScript

In the early stages of developing an application using Next.js, Mongoose, and Typescript, I encountered a persistent issue. Whenever I attempt to send a request through Postman after clicking save, it fails, displaying the error message: OverwriteModelErr ...

typescriptmongodbmongoosenext.jspostman

How can conditional types be implemented with React Select?

I am working on enhancing a wrapper for React-select by adding the capability to select multiple options My onChange prop is defined as: onChange: ( newValue: SingleValue<Option>, actionMeta: ActionMeta<Option>, ) => void Howev ...

javascriptreactjstypescriptreact-select