You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Create slice changes (#197)
* Include case reducers in createSlice result (#209)
* Fix missing name field in type test
* Include provided case reducers in createSlice output
- Added `caseReducers` field to the createSlice return object
- Added test and type test for returned case reducer
- Removed "Enhanced" terminology from types, and replaced with
"CaseReducerWithPrepare" and "CaseReducerDefinition"
- Restructured logic to only loop over reducer names once, and
check case reducer definition type once per entry
* Add type tests for correct case reducer export inference
* Rewrite caseReducers types for correct inference of state + action
* Add type test for reducers with prepare callback
* Fix type inference for actions from reducers w/ prepare callbacks
* Clean up type names and usages
* Use a generic State type in ActionForReducer
* Re-switch Slice generics order
* Use `void` instead of `any` for undefined payloads (#174)
* Change default createAction payload type to void to make it required
* Fix createAction type tests per review
* Update tutorials for v0.8 (#213)
* Update basic tutorial with createSlice changes
* Update intermediate tutorial with createSlice changes
* Update advanced tutorial with createSlice changes
* Change existing commit links to point to reduxjs org repos
Copy file name to clipboardExpand all lines: docs/tutorials/advanced-tutorial.md
+18-18Lines changed: 18 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -21,7 +21,7 @@ In the process, we'll look at a few examples of TypeScript techniques you can us
21
21
>
22
22
> In addition, this tutorial does not mean you _must_ convert your React app logic completely to Redux. [It's up to you to decide what state should live in React components, and what should be in Redux](https://redux.js.org/faq/organizing-state#do-i-have-to-put-all-my-state-into-redux-should-i-ever-use-reacts-setstate). This is just an example of how you _could_ convert logic to use Redux if you choose to.
23
23
24
-
The complete source code for the converted application from this tutorial is available at [github.com/markerikson/rsk-github-issues-example](https://github.com/markerikson/rsk-github-issues-example). We'll be walking through the conversion process as shown in this repo's history. Links to meaningful individual commits will be highlighted in quote blocks, like this:
24
+
The complete source code for the converted application from this tutorial is available at [github.com/reduxjs/rsk-github-issues-example](https://github.com/reduxjs/rsk-github-issues-example). We'll be walking through the conversion process as shown in this repo's history. Links to meaningful individual commits will be highlighted in quote blocks, like this:
25
25
26
26
> - Commit message here
27
27
@@ -52,15 +52,15 @@ The codebase is already laid out in a "feature folder" structure, The main piece
52
52
53
53
Since this app doesn't yet use Redux at all, the first step is to install Redux Starter Kit and React-Redux. Since this is a TypeScript app, we'll also need to add `@types/react-redux` as well. Add those packages to the project via either Yarn or NPM.
54
54
55
-
> -[Add Redux Starter Kit and React-Redux packages](https://github.com/markerikson/rsk-github-issues-example/commit/8f69804d8940ba40604949ca682a7ae968e8bc4f)
55
+
> -[Add Redux Starter Kit and React-Redux packages](https://github.com/reduxjs/rsk-github-issues-example/commit/8f69804d8940ba40604949ca682a7ae968e8bc4f)
56
56
57
57
Next, we need to set up the usual pieces: a root reducer function, the Redux store, and the `<Provider>` to make that store available to our component tree.
58
58
59
59
In the process, we're going to set up "Hot Module Replacement" for our app. That way, whenever we make a change to the reducer logic or the component tree, Create-React-App will rebuild the app and swap the changed code into our running app, without having to completely refresh the page.
60
60
61
61
#### Creating the Root Reducer
62
62
63
-
> -[Add store and root reducer with reducer HMR](https://github.com/markerikson/rsk-github-issues-example/commit/26054ea8be1a44cac75fd55f497ce20e264de2b0)
63
+
> -[Add store and root reducer with reducer HMR](https://github.com/reduxjs/rsk-github-issues-example/commit/26054ea8be1a44cac75fd55f497ce20e264de2b0)
64
64
65
65
First, we'll create the root reducer function. We don't have any slices yet, so it will just return an empty object.
66
66
@@ -113,7 +113,7 @@ The `require('./rootReducer').default` looks a bit odd. That's because we're mix
113
113
114
114
Now that the store has been created, we can add it to the React component tree.
115
115
116
-
> -[Render Redux Provider with app HMR](https://github.com/markerikson/rsk-github-issues-example/commit/49cf5caebd427e7bb6b7ab07098c3bbb12134faf)
116
+
> -[Render Redux Provider with app HMR](https://github.com/reduxjs/rsk-github-issues-example/commit/49cf5caebd427e7bb6b7ab07098c3bbb12134faf)
117
117
118
118
As with the root reducer, we can hot-reload the React component tree whenever a component file changes. The best way is to write a function that imports the `<App>` component and renders it, call that once on startup to show the React component tree as usual, and then reuse that function any time a component is changed.
119
119
@@ -170,7 +170,7 @@ The first step is to look at the data that is currently being kept in `<App>`, a
170
170
171
171
Let's look at the source for the whole slice, and then break down what it's doing:
172
172
173
-
> -[Add initial state slice for UI display](https://github.com/markerikson/rsk-github-issues-example/commit/ec809346d5afe8f96bb56e487c2e41d274d80c69)
173
+
> -[Add initial state slice for UI display](https://github.com/reduxjs/rsk-github-issues-example/commit/ec809346d5afe8f96bb56e487c2e41d274d80c69)
174
174
175
175
**features/issuesDisplay/issuesDisplaySlice.ts**
176
176
@@ -206,7 +206,7 @@ let initialState: CurrentDisplayState = {
@@ -288,7 +288,7 @@ import { combineReducers } from 'redux-starter-kit'
288
288
289
289
Now that the issues display slice is hooked up to the store, we can update `<App>` to use that instead of its internal component state.
290
290
291
-
> -[Convert main issues display control to Redux](https://github.com/markerikson/rsk-github-issues-example/commit/07bea70da4439c4c38b9b8d4eb0f10c67e6feee2)
291
+
> -[Convert main issues display control to Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/07bea70da4439c4c38b9b8d4eb0f10c67e6feee2)
292
292
293
293
We need to make three groups of changes to the `App` component:
294
294
@@ -514,7 +514,7 @@ Since the thunk middleware is already set up, we don't have to do any work there
514
514
515
515
Before we go any further, let's add a type declaration we can reuse instead.
@@ -544,7 +544,7 @@ There are many cases where you would want different type settings here, but thes
544
544
545
545
Now that we have that type, we can write a slice of state for fetching details on a repo.
546
546
547
-
> -[Add a slice for storing repo details](https://github.com/markerikson/rsk-github-issues-example/commit/da9291bf428a96c3f2e8862f42e3be08461d514c)
547
+
> -[Add a slice for storing repo details](https://github.com/reduxjs/rsk-github-issues-example/commit/da9291bf428a96c3f2e8862f42e3be08461d514c)
@@ -615,7 +615,7 @@ While not shown, we also add the slice reducer to our root reducer.
615
615
616
616
Now that the repo details slice exists, we can use it in the `<IssuesListPage>` component.
617
617
618
-
> -[Update IssuesListPage to fetch repo details via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/964134a00bc1a54ba8758ca274049c9174e88f9a)
618
+
> -[Update IssuesListPage to fetch repo details via Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/964134a00bc1a54ba8758ca274049c9174e88f9a)
619
619
620
620
**features/issuesList/IssuesListPage.tsx**
621
621
@@ -694,7 +694,7 @@ Inside our `useEffect`, we drop the `fetchIssueCount` function, and dispatch `fe
694
694
695
695
Next up, we need to replace the logic for fetching a list of open issues.
696
696
697
-
> -[Add a slice for tracking issues state](https://github.com/markerikson/rsk-github-issues-example/commit/b2e5919651a5076e3857da96321bc979a8ae54b9)
697
+
> -[Add a slice for tracking issues state](https://github.com/reduxjs/rsk-github-issues-example/commit/b2e5919651a5076e3857da96321bc979a8ae54b9)
698
698
699
699
**features/issuesList/issuesSlice.ts**
700
700
@@ -733,7 +733,7 @@ function loadingFailed(state: IssuesState, action: PayloadAction<string>) {
733
733
}
734
734
735
735
const issues =createSlice({
736
-
slice: 'issues',
736
+
name: 'issues',
737
737
initialState: issuesInitialState,
738
738
reducers: {
739
739
getIssueStart: startLoading,
@@ -811,7 +811,7 @@ This slice is a bit longer, but it's the same basic approach as before: write th
811
811
812
812
Now we can finish converting the `<IssuesListPage>` component by swapping out the issues fetching logic.
813
813
814
-
> -[Update IssuesListPage to fetch issues data via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/8dbdc0726ccecf354a01351786196648c752c0a6)
814
+
> -[Update IssuesListPage to fetch issues data via Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/8dbdc0726ccecf354a01351786196648c752c0a6)
815
815
816
816
Let's look at the changes.
817
817
@@ -950,7 +950,7 @@ It's very similar to `<IssuesListPage>`. We store the current displayed `Issue`,
950
950
951
951
We conveniently already have the Redux logic for fetching a single issue - we wrote that already as part of `issuesSlice.ts`. So, we can immediately jump straight to using that here in `<IssueDetailsPage>`.
952
952
953
-
> -[Update IssueDetailsPage to fetch issue data via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
953
+
> -[Update IssueDetailsPage to fetch issue data via Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
954
954
955
955
**features/issueDetails/IssueDetailsPage.tsx**
956
956
@@ -1015,7 +1015,7 @@ Interestingly, there's actually a bit of a change in behavior here. The original
1015
1015
1016
1016
We have one more slice left to write - we need to fetch and store comments for the current issue.
1017
1017
1018
-
> -[Add a slice for tracking comments data](https://github.com/markerikson/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
1018
+
> -[Add a slice for tracking comments data](https://github.com/reduxjs/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
@@ -1087,7 +1087,7 @@ The slice should look pretty familiar at this point. Our main bit of state is a
1087
1087
1088
1088
The final step is to swap the comments fetching logic in `<IssueDetailsPage>`.
1089
1089
1090
-
> -[Update IssueDetailsPage to fetch comments via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/9d1246a4d89f21da1f0e5377f040bc766e1fc0fd)
1090
+
> -[Update IssueDetailsPage to fetch comments via Redux](https://github.com/reduxjs/rsk-github-issues-example/commit/9d1246a4d89f21da1f0e5377f040bc766e1fc0fd)
0 commit comments