reduxjs / redux-templates Goto Github PK
View Code? Open in Web Editor NEWOfficial Redux templates for Vite, Create-React-App, and more
Home Page: https://redux.js.org
License: MIT License
Official Redux templates for Vite, Create-React-App, and more
Home Page: https://redux.js.org
License: MIT License
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.
it said a case is failed, is it designed by purpose? what is the fix of it?
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?
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.
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?
I have found a bug.
Here are steps to reproduce
cra-template-redux-typescript
App.test.tsx
fireEvent
from @testing-library/react
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
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
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.)
The TypeScript definition of useAppDispatch
can be shortened, as mentioned in this tweet.
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?
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...
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.
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?
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:
@nickmccurdy is up for doing the main work here
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.
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.
VS code intellisense should auto-import react hooks from 'react' always
No response
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
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.
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
We need to update this template to support React 18 and React-Redux v8.
This should include:
createRoot()
, per https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html and facebook/create-react-app#12220react-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/releasesRelated JS template issue: reduxjs/cra-template-redux#52
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.
@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.
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.
You could add a .eslintrc
to the template.
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:
@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.
I'm not able to get the service worker registering correctly with this template. Here are the steps to reproduce the problem :
npx [email protected] my-pwa --template redux-typescript
index.tsx
to enable the service worker at line 21 as follow : serviceWorker.register();
npm run build
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.
Sorry to ask question as an issue. Please close after answering.
Does this template has hot reloading support?
I cloned the repo, tried to run yarn lint, got 53 fixable errors. running type-check doesn't work because tsconfig is missing.
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.
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:
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
We should add a couple of RN templates.
@rahsheen has a couple of existing templates at:
Maybe we can migrate those over?
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.
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:
We should do something along those lines for the updated templates.
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,...>
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.