react-redux-typescript | Project template for projects that use React | Frontend Framework library

Complete working codesandbox example here

I declare a simple action type and an asynchronous thunk that dispatches it:

I've come across a pattern that can be summarized as:

I'm trying to connect a React element with react-redux that has arbitrary/generic props, but it's not compiling correctly. I've tried using JSXElementConstructor and (new (props: Props) => React.Component) instead of ComponentType, but got a different error about how Props could be instantiated with a different type. Here's the code. Any help would be appreciated.

https://github.com/piotrwitek/react-redux-typescript-guide/issues/55 looks related, but that seems to be about the props having a generic, instead of the props themselves being a generic.

Code

I'm using typesafe-actions and would like to create a root reducer that will allow me to handle global actions like LOGGED_OUT, in order to clear state. Like in the answer to this question.

I've tried a few things but I keep losing the type safety that typesafe-actions provides, and the reducer reverts to an any type.

I have a pretty vanilla type safe actions setup. I haven't posted the permutation solutions of implicit typing that I've tried, because I don't think it will add any clarity to the question.

The closest to a solution being found I could find was in this thread. The maintainer of type safe actions himself posted a response and mentioned that he already had a solution, though from that point on there were no links or references provided.

Any help would be great.

For the record, I can get this to functionally work following the pattern as per the Stack overflow question I posted, however the types are broken.

Is it possible to define the return type of the createSelector function in Redux's Reselect?

I couldn't figure this out from the official docs: https://github.com/reduxjs/reselect#q-are-there-typescript-typings

This cheatsheet also doesn't seem to provide this: https://github.com/piotrwitek/react-redux-typescript-guide#selectors-with-reselect

I am new user struggling with the following issue. I have a Higher Order Component (Hoc) that injects properties to a wrapped component. The HoC itself returns a React.ComponentClass that is connected to the redux store with map and dispatch properties.

I am trying to use the HoC with a component that is also connected to the redux store. Using console log output statements I can see that all properties within the wrapped component are initialised aside from the dispatch properties, which are undefined. I do not understand why the dispatch properties are undefined in the wrapped component????

I am using react-redux 7.1 and deriving map and dispatch properties with the ConnectedProps react-redux type.

Higher Order Component

30/11/2019 Updated the code sandbox with the solution here.

Original Question asked on 28/11/2019 I am trying to learn Higher Order Components but struggling to get a Higher Order Component connected to the redux store and router. Hoping that someone can help with a Higher Order Component type compilation problem I am struggling with relating to mapStateToProps.

I am trying to create a higher order component, withErrorListener. It has the following features:

1. withErrorListener wraps a base component that has the uniqueId property. The uniqueId property is created by another Higher Order Component, withId.
2. withErrorListener returns a wrapper class component that listens on the redux store and filters errors notified for that the base component. If there are no errors to display it renders the base component. I am filtering errors in redux state using mapStateToProps(state, ownProps) => StateProps, where StateProps = { error: IApiFailure[]}
3. wthErrorListener renders the errors and dispatches a _clear_error_ action when the component is unmounted by clicking home button on error rendered page. This means that the higher order component also requires RouterComponentProps dependency.

It is intended to be used as follows NewComponent = withErrorListener(withId(BaseComponent)).

The problem that I am encountering is that Typescript raises the compile error that type IApiFailure cannot be found in the ErrorListener HoC class when it is assigned to the react-redux connect function. IApiFailure is a type contained within the StateProps return type for the mapStateToProps function. The only way that I can get it to compile is to cast to the any type.

The HoC is connected to the store with the following code snippet below. The full code for the HoC ErrorListener class can be found here. I have also included the error information below ...

Subsequently, I cannot connect the connected component to the withRouter function. If I cast the Hoc ErrorListener to any type in the connect function, then compilation succeeds but the uniqueId property in OwnProps is undefined. This is used to filter the error store.

I am trying to learn React / Redux usage with higher order components in a Typescript environment. I have two higher order components:

1. withId: Generates uniqueId property for base component
2. withErrorListener: Renders errors on the redux store, originating from a base component request. The base component should have the uniqueId property created from the withId higher order component.

NewComponent = withErrorListener(withId(BaseComponent))

I am trying to learn how to use React with Redux in a Typescript environment. I am using the patterns suggested at react-redux-typescript playground. However, I am receiving the following error when trying to build the code listed below:

'courses' is missing in props validation

'courses.map' is missing in props validation

Has anyone else experienced this type of error? Is it a linting error from eslint plugin:react/recommended?

I am also struggling to understand the process of initialising the default state from the redux store when retrieving data from an API using redux-observable. I have store, epics, reducers, actions etc. configured as suggested by patterns from the react-redux-typescript playground. These are configured for fetching a list of courses from an API using a redux-observable. Subsequently, I have three actions and reducers defined: 1. FETCH_COURSES_ERROR 2. FETCH_COURSES_REQUEST 3. FETCH_COURSES_SUCCESS

How do I then trigger my CourseList container to start the process of fetching and rendering list of courses. Is it good practice to have the redux store fetch the initial state for list of courses ( FETCH_COURSES_REQUEST -> FETCH_COURSES_SUCCESS || FETCH_COURSES_REQUEST -> FETCH_COURSES_ERROR. In short I do not understand how to connect/trigger the epic to the CourseList container....

Epic Middleware initialised and run in store module....