Should be basically identical to our CRA+TS template.

It should include Vitest and ESLint, so that you get testing and the rules of hooks stuff like you would with CRA.

A couple existing templates to use for reference:

• https://github.com/nvh95/vite-react-template-redux
• https://github.com/nickmccurdy/vite-react-testing

@nickmccurdy is up for doing the main work here

Using the command npx create-react-app my-app --template redux-typescript to start a new project when attempting to run npm test I get the following output and no tests run. I have made no changes before attempting to run tests.

/usr/local/bin/node[37209]: ../src/module_wrap.cc:599:MaybeLocal<v8::Promise> node::loader::ImportModuleDynamically(Local<v8::Context>, Local<v8::Data>, Local<v8::Value>, Local<v8::String>, Local<v8::FixedArray>): Assertion `(it) != (env->id_to_function_map.end())' failed.
 1: 0x10fd5a325 node::Abort() (.cold.1) [/usr/local/bin/node]
 2: 0x10e6a6ab9 node::Abort() [/usr/local/bin/node]
 3: 0x10e6a6861 node::Assert(node::AssertionInfo const&) [/usr/local/bin/node]
 4: 0x10e6657a1 node::loader::ImportModuleDynamically(v8::Local<v8::Context>, v8::Local<v8::Data>, v8::Local<v8::Value>, v8::Local<v8::String>, v8::Local<v8::FixedArray>) [/usr/local/bin/node]
 5: 0x10e9a840d v8::internal::Isolate::RunHostImportModuleDynamicallyCallback(v8::internal::MaybeHandle<v8::internal::Script>, v8::internal::Handle<v8::internal::Object>, v8::internal::MaybeHandle<v8::internal::Object>) [/usr/local/bin/node]
 6: 0x10ee84265 v8::internal::Runtime_DynamicImportCall(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
 7: 0x10f2c9774 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvInRegister_NoBuiltinExit [/usr/local/bin/node]

I running these versions:

• npm - 9.5.1
• Node - 19.8.0

The latest versions of cra-template-typescript have some goodies by default, like web-vitals, and maybe a few other things (I created my app with this template, and the fancy new jsx transform doesn't seem to be working). They should be ported.

We need to update this template to support React 18 and React-Redux v8.

This should include:

• Changing the template rendering setup to match React 18's createRoot(), per https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html and facebook/create-react-app#12220
• Updating all dependencies to the latest
• Specifically updating react-redux to the latest 8.0-rc (and eventually 8.0 final, but I'd like to have the PR for the template ready before I release 8.0): https://github.com/reduxjs/react-redux/releases

Related JS template issue: reduxjs/cra-template-redux#52

In src/app/store.ts, the file imported couterReducer from counterSlice

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

In src/features/counter/counterSlice.ts, there is a selector that used RootState type from store.js

import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootState, AppThunk } from '../../app/store';
import { fetchCount } from './counterAPI';

//...
export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    //... 
  }
});

//...
export const selectCount = (state: RootState) => state.counter.value;
//...
export default counterSlice.reducer;

I think it is a circular import, should split the selector variable from slice into a seperate file.

most of the ThunkAction returns void, but sometimes the return value from dispatch is useful. Generally a promise might be returned and we can chain things, eg:
dispatch(thunkAction()).then(...)

I see that AppThunk is defined as ThunkAction<void,...>. Should it be something generic like
AppThunk = ThunkAction<T,...>

@nickmccurdy asked on Discord:

do you want us to figure out how to publish these Vite templates so they work like the CRA and Create Vite templates

Not sure what's involved there, but could consider that later.

Our templates currently just have a small "counter slice" set up. There's an async thunk included, but it's pretty simple.

Today we want users to fetch data with RTK Query.

We should configure the templates to have RTKQ set up out of the box, and have a small example endpoint set up. (It should probably still do mock data of some kind, but not immediately sure how.)

Now that we have the plain JS template at https://github.com/reduxjs/cra-template-redux published as 1.0.0, we can start working on the TS template.

Based on the process we used for that template, seems like we should:

• Create a PR here that adds the entire contents of the standard CRA TS template, minus the version numbers, and merge that in
• Create a PR that clears out the source code contents (or possibly just skip all the source in the first PR)
• Create a PR that ports the code from the JS template, and converts it all to TS.

@BenLorantfy indicated he was interested in doing this one too ( reduxjs/cra-template-redux#1 (comment) ) , but could probably get a couple folks collaborating here.

Hi guys! I was giving a try to this template but it failed on installation:

13:28:48 ❯ npx create-react-app . --template redux-typescript
npx: installed 99 in 6.706s

Creating a new React app in /Users/david.torralba/projects/tempus/tempus-ui.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-redux-typescript...

yarn add v1.21.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > [email protected]" has incorrect peer dependency "[email protected]".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 19.01s.
internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'cra-template-redux-typescript'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.resolve (internal/modules/cjs/helpers.js:32:19)
    at module.exports (/Users/david.torralba/projects/tempus/tempus-ui/node_modules/react-scripts/scripts/init.js:110:13)
    at [eval]:3:14
    at Script.runInThisContext (vm.js:96:20)
    at Object.runInThisContext (vm.js:303:38)
    at Object.<anonymous> ([eval]-wrapper:6:22)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at evalScript (internal/bootstrap/node.js:587:27)
    at startup (internal/bootstrap/node.js:265:9)

Aborting installation.
  node  has failed.

Deleting generated file... node_modules
Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.

NVM: 1.0.1
Node: v13.9.0
NPM: 6.13.7

Any suggestions?

EDIT:
I've tried other templates and work fine:

npx create-react-app . --template redux-typescript  # fail
npx create-react-app . --template typescript  # OK
npx create-react-app . --template redux  # OK

It just caught my attention that as of v1.0.1 this template is using TypeScript v3.8.2. Is there any reason not to move to TypeScript v4?

Current version has no example for asynchronous actions testing.
I would like to suggest a small addition to the tests. This will make it very easy to understand how to test asynchronous actions. It is very difficult to find an example showing how to implement asynchronous actions testing.
It will be helpful?

I cloned the repo, tried to run yarn lint, got 53 fixable errors. running type-check doesn't work because tsconfig is missing.

The TypeScript definition of useAppDispatch can be shortened, as mentioned in this tweet.

To create RootState we need store. To create store we need counterReducer. To create counterReducer we need RootState.
Cyclic dependency occured.

Same applied to AppThunk

I removed this error by restructure project:

before:
counterSlice.ts

after:
slice.ts
selectors.ts
async.ts

Hey, I'm trying to spin up a new app using the following:

npx create-react-app my-app --template redux-typescript

and seeing this error even when using --force or --legacy-peer-deps

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.3 || ^17" from [email protected]
npm ERR! node_modules/react-redux
npm ERR!   react-redux@"^7.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/christopher.mowbray/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/christopher.mowbray/.npm/_logs/2022-03-30T10_07_21_210Z-debug.log
`npm install --no-audit --save @reduxjs/toolkit@^1.5.1 @testing-library/react@^9.3.2 @testing-library/jest-dom@^4.2.4 @testing-library/user-event@^7.1.2 @types/node@^12.0.0 @types/react@^16.9.0 @types/react-dom@^16.9.0 @types/react-redux@^7.1.7 @types/jest@^24.0.0 react-redux@^7.2.0 typescript@~4.1.5` failed

https://github.com/reduxjs/cra-template-redux-typescript/blob/8e5761faf1a446c08fa98c228f7521677fea6f4a/template/src/features/counter/counterSlice.spec.ts#L14

it said a case is failed, is it designed by purpose? what is the fix of it?

Ran npx create-react-app react-graphql-starter --template redux-typescript and got

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",

This should either be updated to work or removed from https://redux-toolkit.js.org/introduction/getting-started to save developers time. Had to install things myself and look for other templates.

yarn @reduxjs/toolkit @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/node @types/jest react-redux

notice I had to install redux toolkit and react-redux 😆 . Not recommending until updated.

macOS Big Sur 11.2.3
node: v12.6.0
npm : 6.9.0

We had some kind of tests/linting set up previously, but I disabled that when I moved the CRA+TS template into a subfolder and copied over the CRA+JS template.

We should figure out what checks we want to have and get those put together again.

Our docs page at https://redux.js.org/usage/writing-tests recommends an "integration"-style testing approach. But, the example tests are currently expect(counterReducer(state, action)).toEqual(expected).

There was a previous PR to the CRA+JS template that tried to switch the tests over to "integration"-style:

• reduxjs/cra-template-redux#56

We should do something along those lines for the updated templates.

Using the AppThunk type, I may write some thunk that returns a promise:

export const incrementAsync = (amount: number): AppThunk => async dispatch => {
  dispatch(incrementByAmount(amount))
  return await Promise.resolve(amount);
};

But, AppThunk does not seem to infer the return type here, and just uses void. So, incrementAsync gets a type of (amount: number) => AppThunk<void>.

Using a classic signature like

export const incrementAsync = (amount: number) => async (dispatch: Dispatch) => {
  dispatch(incrementByAmount(amount))
  return await Promise.resolve(amount);
};

gives us a type for incrementAsync of const incrementAsync: (amount: number) => (dispatch: Dispatch) => Promise<number> which infers the thunk return type properly.

Probably consider this more of a feature request, but it would be neat if there were a pattern that could support both the return type & parameter type inference here.

I'm not able to get the service worker registering correctly with this template. Here are the steps to reproduce the problem :

• install the template npx [email protected] my-pwa --template redux-typescript
• edit index.tsx to enable the service worker at line 21 as follow : serviceWorker.register();
• build the application npm run build
• serve the application with serve : serve -s build

The service workers are not installed, this is visible either setting a breakpoint as well as checking with Chrome's developer tools.

npm run type-check is giving errors

Both the CRA template folders currently have NPM package-lock.json files. Switch everything over to Yarn 3 for consistency with the other Redux repos.

The same issue manifested itself in create-react-app earlier today. When you call

npx create-react-app app --template redux-typescript

the command fails with the following output

No valid exports main found for '/Users/blackpanther-ralco/.config/yarn/global/node_modules/is-promise'

node version: v13.8.0

You could add a .eslintrc to the template.

Is it possible to create a npm managed version of the template which would be activated by the flag or something, and documented in the readme.

If this is already possible, please document in the readme.

I think a lot of folks who are spinning up new Create React apps are used to getting out-of-the-box:

npm start

I for one am definitely reliant on it and not super familiar with the interworkings under the hood. I tried adding

"start" : "react-scripts start",

to my package.json and then running npm start but then get complaints about

Error: ENOENT: no such file or directory, open '.../cra-template-redux-typescript/src/react-app-env.d.ts'.

So once I move the file to where it needs, I further just keep getting errors. Is this project set up to run once cloned or are there a lot of steps to do? I've checked out the README's but their inaccurate. For example, as stated previous, there is no start argument set in the package.json.

Sorry to ask question as an issue. Please close after answering.

Does this template has hot reloading support?

I have a fresh install of yarn create react-app my-app --template redux-typescript

The app stop working after install aws-appsync with yarn add aws-appsync

incrementAsync and incrementIfOdd could not be dispatched with the custom typed hooks

How to make these methods work with aws-appsync installed?

We now recommend creating pre-typed versions of the React-Redux hooks, useAppSelector and useAppDispatch, and typically putting them in app/hooks.ts:

https://redux.js.org/recipes/usage-with-typescript#define-typed-hooks

The template doesn't do that yet. Can someone add that?

Hi there, I would love to add redux-dynamic-modules to this template, which allows to dynamically add redux logic instead of having to define it all in one central store file. This library made redux really useful as the store doesn't get cluttered with state that isn't currently needed, it makes code more modular and adding it in this template would bring it to the attention of other people using redux.
What do you think? I know that adding more stuff to a template is always problemativ, but as the template already takes an opinionated approach by adding thunk instead of e. g. redux-saga or rxjs it feels to me that this choice would make sense as well.
If there is interest, I could also provide the PR.

Installation crashed on both 12.16.1 Lts and 13.10.1 current version of node ( run on nvm )
Crashed on both npx and yarn.
create-react-app --template typescript (the normal one, without redux) works.
create-react-app --template redux also works.

Only this one seems to be broken...

Noticed this when writing a unit test where I was getting something like in this issue testing-library/react-testing-library#802 when importing:

import { render, screen } from "@testing-library/react";

so I ran yarn upgrade-interactive --latest and got:

so I picked all to upgrade and it cleared my error right up. Note the issue I linked is set back in 2020!

I recommend updating this package.json https://github.com/reduxjs/cra-template-redux-typescript/blob/master/template.json to reflect the latest versions of these packages.

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React:
• ReactDOM/React Native:
• Redux:
• React Redux:

What is the current behavior?

After creating redux-ts app with npx create-react-app my-app --template redux-typescript, VS code intellisense is suggesting that I import from hoist-non-react-statics/node_modules/@types/react instead of from react when importing react hooks like useEffect and useRef

The underlying problem is that the @types/react is outdated. yarn upgrade @types/react --latest fixed it. The default versions of these type packages should be updated.

What is the expected behavior?

VS code intellisense should auto-import react hooks from 'react' always

Which browser and OS are affected by this issue?

No response

Did this work in previous versions of React Redux?

• Yes

It may be worth switching the current thunk snippet to be createAsyncThunk instead. Right now, we have:

// The function below is called a thunk and allows us to perform async logic. It
// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
// will call the thunk with the `dispatch` function as the first argument. Async
// code can then be executed and other actions can be dispatched
export const incrementAsync = (amount: number): AppThunk => dispatch => {
  setTimeout(() => {
    dispatch(incrementByAmount(amount));
  }, 1000);
};

I'm debating whether a createAsyncThunk with a fake timer-resolved Promise instead of an API call would be better here? Except they're sorta different use cases, conceptually.

Not sure what's better.

The flip side is that now the slice is having to handle listening to the thunk-generated actions, vs the hand-written thunk using the slice-generated action.

Maybe both? I dunno!

I assume the file is usually getting deleted right away anyway, but we want useful examples in it.

I have found a bug.

Here are steps to reproduce

1. Create a new project using cra-template-redux-typescript
2. Go to App.test.tsx
3. Try to import fireEvent from @testing-library/react
4. VSCode shows an error Module '@testing-library/react' has no exported member 'fireEvent'.

Repro project:
redux-ts-test.zip

It's worth noting that this bug does not exist in official CRA templates: cra-template and cra-template-typescript

We should add a couple of RN templates.

@rahsheen has a couple of existing templates at:

• https://github.com/rahsheen/react-native-template-redux-typescript
• https://github.com/rahsheen/expo-template-redux-typescript

Maybe we can migrate those over?