reduxjs / cra-template-redux Goto Github PK
View Code? Open in Web Editor NEWARCHIVED: the CRA+JS template has moved to https://github.com/reduxjs/redux-templates
Home Page: https://github.com/reduxjs/redux-templates
License: MIT License
ARCHIVED: the CRA+JS template has moved to https://github.com/reduxjs/redux-templates
Home Page: https://github.com/reduxjs/redux-templates
License: MIT License
Installing with create-react-app template redux and yarn returns a dependency issue.
Failed to compile.
./node_modules/immer/dist/index.js
Module not found: Can't resolve './immer.cjs.development.js
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-redux...
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
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 25 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 15.82s.
Initialized a git repository.
Installing template dependencies using yarnpkg...
yarn add v1.22.5
[1/4] Resolving packages...
warning @testing-library/react > @types/testing-library__react > @types/[email protected]: This is a stub types definition. testing-library__dom provides its own type definitions, so you do not need this installed.
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
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".
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
warning " > [email protected]" has incorrect peer dependency "react@^16.8.3".
warning " > [email protected]" has unmet peer dependency "redux@^2.0.0 || ^3.0.0 || ^4.0.0-0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 31 new dependencies.
info Direct dependencies
├─ @reduxjs/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @reduxjs/[email protected]
├─ @sheerun/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 17.25s.
{
"name": "create-react-app-redux",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.1.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-redux": "^7.1.3",
"react-scripts": "3.4.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Is your feature request related to a problem? Please describe.
Vite is a blazing fast build tool that supports many frontend frameworks, including React and React Typescript. I personally set up Redux for Vite React Typescript manually many times in the last couple of months. It would be helpful for the community if we have an official Vite template for Redux/ Redux Toolkit
Describe the solution you'd like
Describe how should we implement this feature
vite-react-template-redux
and vite-react-template-redux-typescript
Other things to keep in mind
react@17
and react-redux@17
as well? Need a discussion for this.The async example is good, but perhaps not as universally applicable as a REST API call. What about adding a few state modifications to the slice?
fetchTodoStart: (state, action) => {
state.todoLoading = true;
state.todo = null;
state.todoError = null;
},
fetchTodoSuccess: (state, action) => {
state.todoLoading = false;
state.todo = action.payload;
},
fetchTodoFailure: (state, action) => {
state.todoLoading = false;
state.todoError = action.payload;
},
Then using fetch to get the content?
export const fetchTodo = (id) => async (dispatch) => {
dispatch(fetchTodoStart(id));
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const todo = await response.json();
dispatch(fetchTodoSuccess(todo));
} catch (e) {
dispatch(fetchTodoFailure(JSON.stringify(e)));
}
};
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 TS template issue: reduxjs/redux-templates#65
It would be great if, as next feature, there could be an official template in TypeScript!
Hey everyone,
just tried to setup a new react redux project with create-react-app and the redux template.
When installing dependencies, I receive the following errors in resolving the dep. tree:
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.3" 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 MY FILE PATH for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! MY PATH/log
`npm install --no-audit --save @reduxjs/toolkit@^1.5.1 @testing-library/jest-dom@^4.2.4 @testing-library/react@^9.3.2 @testing-library/user-event@^7.1.2 react-redux@^7.2.3` failed
Also found this problem mentioned here.
EDIT: npm install --no-audit --save --force @reduxjs/toolkit@^1.5.1 @testing-library/jest-dom@^4.2.4 @testing-library/react@^9.3.2 @testing-library/user-event@^7.1.2 react-redux@^7.2.3
at least lets me compile the build succesfully -- but is there a better option?
Any advice on how to resolve or troubleshoot this?
Thanks in advance!
Files generated with \r\n
line endings
When I created a create-react-app
with your redux
or redux-typescript
templates, and then ran eslint with the prettier plugin, it generated errors for every line in code files. This is because the template generated code with \r\n
line-endings.
Prettier 2.0+ has now changed the default for the end-of-line rule from auto
to lf
, in line with the fact that this is now the de factor standard across all major editors and OSes.
It's easy enough to fix (and vanilla create-react-app
does not have this problem), so I'd suggest you update your files.
Other than that, thanks for the easy setup.
When a new project is created with npx create-react-app my-app --template redux
, almost all of the files have CRLF
line endings. package.json
and yarn.lock
have LF
line endings.
This is also the opposite of the default create-react-app
template where all files have LF
endings.
Inspired by reduxjs/redux-templates#21
I'm starting out with integration tests using React Testing Library and Jest (without mocking the store), but I'm open to suggestions. It seems like the existing Redux examples are doing shallow rendering (not using the store) with Enzyme and direct Redux calls for unit tests, but I don't think we should suggest Enzyme or unit testing components. I might add isolated unit tests for the store code if you'd think it's useful though.
After npx create-react-app my-app --template redux-typescript
these packages should be in the devDependencies:
@types/jest @types/node @types/react @types/react-dom @types/react-redux react-scripts typescript @testing-library/jest-dom @testing-library/react @testing-library/user-event
instead in the general dependencies. Tell me what you guys think!
After trying this out, a few thoughts for tweaks:
useSelector
, or add a comment right above the useSelector
saying you can define them inline // Redux Toolkit allows us write "mutating" logic in reducers. It doesn't
// actually mutate the state because it uses the immer library, which detects
// changes to a "draft state" and produces a brand new immutable state
// based off those changes
increment()
.store.js
into an app
subfolder.These changes should also be made to the TS template as well.
/cc @BenLorantfy , @lukyth
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.