Skip to content

Commit dd2a81e

Browse files
authored
v0.8 integration (#208)
* 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
1 parent de2aad4 commit dd2a81e

File tree

9 files changed

+253
-162
lines changed

9 files changed

+253
-162
lines changed

docs/api/createSlice.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ hide_title: true
77

88
# `createSlice`
99

10-
A function that accepts an initial state, an object full of reducer functions, and optionally a "slice name",
10+
A function that accepts an initial state, an object full of reducer functions, and a "slice name",
1111
and automatically generates action creators and action types that correspond to the reducers and state.
1212

1313
## Parameters
@@ -20,8 +20,8 @@ function createSlice({
2020
reducers: Object<string, ReducerFunction>
2121
// The initial state for the reducer
2222
initialState: any,
23-
// An optional name, used in action types
24-
slice?: string,
23+
// A name, used in action types
24+
name: string,
2525
// An additional object of "case reducers". Keys should be other action types.
2626
extraReducers?: Object<string, ReducerFunction>
2727
})
@@ -44,9 +44,9 @@ state they are given.
4444

4545
The initial state value for this slice of state.
4646

47-
### `slice`
47+
### `name`
4848

49-
An optional string name for this slice of state. Generated action type constants will use this as a prefix.
49+
A string name for this slice of state. Generated action type constants will use this as a prefix.
5050

5151
### `extraReducers`
5252

@@ -73,7 +73,7 @@ to force the TS compiler to accept the computed property.)
7373

7474
```ts
7575
{
76-
slice : string,
76+
name : string,
7777
reducer : ReducerFunction,
7878
actions : Object<string, ActionCreator>,
7979
}
@@ -104,7 +104,7 @@ import { createSlice } from 'redux-starter-kit'
104104
import { createStore, combineReducers } from 'redux'
105105
106106
const counter = createSlice({
107-
slice: 'counter', // slice is optional, and could be blank ''
107+
name: 'counter',
108108
initialState: 0,
109109
reducers: {
110110
increment: state => state + 1,
@@ -114,7 +114,7 @@ const counter = createSlice({
114114
})
115115
116116
const user = createSlice({
117-
slice: 'user',
117+
name: 'user',
118118
initialState: { name: '', age: 20 },
119119
reducers: {
120120
setUserName: (state, action) => {

docs/tutorials/advanced-tutorial.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ In the process, we'll look at a few examples of TypeScript techniques you can us
2121
>
2222
> 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.
2323
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:
2525

2626
> - Commit message here
2727
@@ -52,15 +52,15 @@ The codebase is already laid out in a "feature folder" structure, The main piece
5252

5353
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.
5454

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)
5656
5757
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.
5858

5959
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.
6060

6161
#### Creating the Root Reducer
6262

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)
6464
6565
First, we'll create the root reducer function. We don't have any slices yet, so it will just return an empty object.
6666

@@ -113,7 +113,7 @@ The `require('./rootReducer').default` looks a bit odd. That's because we're mix
113113

114114
Now that the store has been created, we can add it to the React component tree.
115115

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)
117117
118118
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.
119119

@@ -170,7 +170,7 @@ The first step is to look at the data that is currently being kept in `<App>`, a
170170

171171
Let's look at the source for the whole slice, and then break down what it's doing:
172172

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)
174174
175175
**features/issuesDisplay/issuesDisplaySlice.ts**
176176

@@ -206,7 +206,7 @@ let initialState: CurrentDisplayState = {
206206
}
207207

208208
const issuesDisplaySlice = createSlice({
209-
slice: 'issuesDisplay',
209+
name: 'issuesDisplay',
210210
initialState,
211211
reducers: {
212212
displayRepo(state, action: PayloadAction<CurrentRepo>) {
@@ -288,7 +288,7 @@ import { combineReducers } from 'redux-starter-kit'
288288

289289
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.
290290

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)
292292
293293
We need to make three groups of changes to the `App` component:
294294

@@ -514,7 +514,7 @@ Since the thunk middleware is already set up, we don't have to do any work there
514514

515515
Before we go any further, let's add a type declaration we can reuse instead.
516516

517-
> - [Add AppThunk type](https://github.com/markerikson/rsk-github-issues-example/commit/2ac93bb089705847a8ce349864d885a5039eff4b)
517+
> - [Add AppThunk type](https://github.com/reduxjs/rsk-github-issues-example/commit/2ac93bb089705847a8ce349864d885a5039eff4b)
518518
519519
**app/store.ts**
520520

@@ -544,7 +544,7 @@ There are many cases where you would want different type settings here, but thes
544544

545545
Now that we have that type, we can write a slice of state for fetching details on a repo.
546546

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)
548548
549549
**features/repoSearch/repoDetailsSlice.ts**
550550

@@ -566,7 +566,7 @@ const initialState: RepoDetailsState = {
566566
}
567567

568568
const repoDetails = createSlice({
569-
slice: 'repoDetails',
569+
name: 'repoDetails',
570570
initialState,
571571
reducers: {
572572
getRepoDetailsSuccess(state, action: PayloadAction<RepoDetails>) {
@@ -615,7 +615,7 @@ While not shown, we also add the slice reducer to our root reducer.
615615

616616
Now that the repo details slice exists, we can use it in the `<IssuesListPage>` component.
617617

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)
619619
620620
**features/issuesList/IssuesListPage.tsx**
621621

@@ -694,7 +694,7 @@ Inside our `useEffect`, we drop the `fetchIssueCount` function, and dispatch `fe
694694

695695
Next up, we need to replace the logic for fetching a list of open issues.
696696

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)
698698
699699
**features/issuesList/issuesSlice.ts**
700700

@@ -733,7 +733,7 @@ function loadingFailed(state: IssuesState, action: PayloadAction<string>) {
733733
}
734734

735735
const issues = createSlice({
736-
slice: 'issues',
736+
name: 'issues',
737737
initialState: issuesInitialState,
738738
reducers: {
739739
getIssueStart: startLoading,
@@ -811,7 +811,7 @@ This slice is a bit longer, but it's the same basic approach as before: write th
811811

812812
Now we can finish converting the `<IssuesListPage>` component by swapping out the issues fetching logic.
813813

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)
815815
816816
Let's look at the changes.
817817

@@ -950,7 +950,7 @@ It's very similar to `<IssuesListPage>`. We store the current displayed `Issue`,
950950

951951
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>`.
952952

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)
954954
955955
**features/issueDetails/IssueDetailsPage.tsx**
956956

@@ -1015,7 +1015,7 @@ Interestingly, there's actually a bit of a change in behavior here. The original
10151015

10161016
We have one more slice left to write - we need to fetch and store comments for the current issue.
10171017

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)
10191019
10201020
**features/issueDetails/commentsSlice.ts**
10211021

@@ -1043,7 +1043,7 @@ const initialState: CommentsState = {
10431043
}
10441044

10451045
const comments = createSlice({
1046-
slice: 'comments',
1046+
name: 'comments',
10471047
initialState,
10481048
reducers: {
10491049
getCommentsStart(state) {
@@ -1087,7 +1087,7 @@ The slice should look pretty familiar at this point. Our main bit of state is a
10871087

10881088
The final step is to swap the comments fetching logic in `<IssueDetailsPage>`.
10891089

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)
10911091
10921092
**features/issueDetails/IssueDetailsPage.tsx**
10931093

docs/tutorials/basic-tutorial.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,7 @@ Here's what our counter example would look like using `createSlice` instead:
225225

226226
```js
227227
const counterSlice = createSlice({
228+
name: 'counter',
228229
initialState: 0,
229230
reducers: {
230231
increment: state => state + 1,

0 commit comments

Comments
 (0)