reduxjs/cra-template-redux

ARCHIVED: the CRA+JS template has moved to https://github.com/reduxjs/redux-templates

cra-template-redux's Issues

Suggested improvement: add an API call (fetch)

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)));
  }
};

Include tests for Counter as example

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.

Vite React example (Javascript + Typescript)

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

• Add official templates for Vite React Redux Javascript and Vite React Redux Typescript.

Describe how should we implement this feature

• Add new repositories vite-react-template-redux and vite-react-template-redux-typescript
• Or move all examples to a single monorepo

Other things to keep in mind

• React 18 is pretty new and React 17 is still widely used. We might need to consider adding examples for react@17 and react-redux@17 as well? Need a discussion for this.

how to add this template on existing project ?

move some dependencies to devDependencies

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!

Update template for React 18 and React-Redux v8

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 TS template issue: reduxjs/redux-templates#65

Post-1.0 tweaks

After trying this out, a few thoughts for tweaks:

• It would be good to either show use of an inline selector with useSelector, or add a comment right above the useSelector saying you can define them inline
• I'd like to tweak the slice comment slightly and say:

      // 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

• We should have an example of a thunk somewhere. Simplest example would be an "Add Async" button that sleeps for 1 second and then dispatches increment().
• I want to move store.js into an app subfolder.

These changes should also be made to the TS template as well.

/cc @BenLorantfy , @lukyth

Template dependencies cannot be resolved

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!

Thunk example

Hey I made a thunk example to the existing component with a 2s delay

#8

Thanks!

Official template for TypeScript

It would be great if, as next feature, there could be an official template in TypeScript!

Module not found: Can't resolve './immer.cjs.development.js'

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"
    ]
  }
}

Inconsistent line endigs

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.

Template generates incomplete react app

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.