reduxjs / rtk-github-issues-example Goto Github PK

rtk-github-issues-example/node_modules/jest-diff/build/index.d.ts
TypeScript error in E:/myself/rtk-github-issues-example/node_modules/jest-diff/build/index.d.ts(10,13):
'=' expected. TS1005

 8 | import { diffLinesRaw, diffLinesUnified, diffLinesUnified2 } from './diffLines';
 9 | import { diffStringsRaw, diffStringsUnified } from './printDiffs';

10 | import type { DiffOptions } from './types';

From Typescript cheatsheet,

consider using type for your React Component Props and State, because it is more constrained.

So I just wonder why in the example, most the places using Interfaces. I am not saying it's right or wrong, just want know the thinking behind it so I can apply the same to my own code base.

Thanks!

P.S. The documentation is super helpful and easy to follow.

Hello,

There seems to be an issue with the version of jest in the current packages.json file

npm install
Works fine. but:

npm start
Fails with:

`/rtk-github-issues-example/node_modules/jest-diff/build/diffLines.d.ts
TypeScript error in /rtk-github-issues-example/node_modules/jest-diff/build/diffLines.d.ts(8,13):
'=' expected. TS1005

 6 |  */
 7 | import { Diff } from './cleanupSemantic';

8 | import type { DiffOptions } from './types';
| ^
9 | export declare const diffLinesUnified: (aLines: string[], bLines: string[], options?: DiffOptions | undefined) => string;
10 | export declare const diffLinesUnified2: (aLinesDisplay: string[], bLinesDisplay: string[], aLinesCompare: string[], bLinesCompare: string[], options?: DiffOptions | undefined) => string;
11 | export declare const diffLinesRaw: (aLines: string[], bLines: string[]) => Diff[];`

In packages.json, I replaced:
"@types/jest": "24.0.18"

with:
"@types/jest": "^24.2.2"

And the app works fine nowl.

Thanks for such a detailed example

After run project, dist folder generated in every folder

npm start fails to compile

Repro:

1. clone repo
2. open folder in vscode
3. npm install
4. npm start
5. observe failure message

Terminal output from npm start

> [email protected] start D:\Dev\rtk-github-issues-example
> react-scripts start

�[34mi�[39m �[90m｢wds｣�[39m: Project is running at http://0.0.0.0:3000/
�[34mi�[39m �[90m｢wds｣�[39m: webpack output is served from 
�[34mi�[39m �[90m｢wds｣�[39m: Content not from webpack is served from D:\Dev\rtk-github-issues-example\public
�[34mi�[39m �[90m｢wds｣�[39m: 404s will fallback to /
Starting the development server...

Failed to compile.

D:/Dev/rtk-github-issues-example/node_modules/jest-diff/build/diffLines.d.ts
TypeScript error in D:/Dev/rtk-github-issues-example/node_modules/jest-diff/build/diffLines.d.ts(8,13):
'=' expected.  TS1005

     6 |  */
     7 | import { Diff } from './cleanupSemantic';
  >  8 | import type { DiffOptions } from './types';
       |             ^
     9 | export declare const diffLinesUnified: (aLines: string[], bLines: string[], options?: DiffOptions | undefined) => string;
    10 | export declare const diffLinesUnified2: (aLinesDisplay: string[], bLinesDisplay: string[], aLinesCompare: string[], bLinesCompare: string[], options?: DiffOptions | undefined) => string;
    11 | export declare const diffLinesRaw: (aLines: string[], bLines: string[]) => Diff[];

I did some quick research and it seems to be related to this issue: https://stackoverflow.com/questions/59833120/parsing-error-expected-in-import-type

I'm guessing the latest version of jest is using a feature that is not fully supported by the typescript compiler. This commit was released 12 hours ago: jestjs/jest@4a59daa#diff-8b6cd0ec8c11f6c2366c3527788d8fe8

Something like:

src/features/issuesList/IssuesList.tsx
src/features/issuesList/IssuesList.test.tsx
src/features/issuesList/IssuesListPage.tsx
src/features/issuesList/IssuesListPage.test.tsx
src/features/issuesList/issuesSlice.ts
src/features/issuesList/issuesSlice.test.ts
...

The most interesting is demonstrate how to test and mock specific RTK features like createSlice, createEntityAdapter...

Hey, I'm curious why the type definitions for the action creators we get back from createSlice expects 2 parameters when the action creators are only ever called with a single parameter.

I see why it works, but would it make sense to update the type definition to use the signature that you're using in the docs?

Hi,

I noticed in this repository reducers being written in this way:

reducers: {
    getRepoDetailsSuccess(state, action: PayloadAction<RepoDetails>) {
      state.openIssuesCount = action.payload.open_issues_count
      state.error = null
    },
}

Isn't it wrong? It looks like the reducer is changing an existing state, which must not happen.

IMHO reducers should look like

reducers: {
    getRepoDetailsSuccess(state, action: PayloadAction<RepoDetails>) {
      return {
        ...state,
        openIssuesCount: action.payload.open_issues_count,
        error: null
      };
    },
}

Am I missing something?

There is a cycle dependency in the repository:

src/features/issuesList/issuesSlice.ts
src/app/store.ts
src/app/rootReducer.ts
src/features/issuesList/issuesSlice.ts