Rewrite "Usage with TS" guide page #4042
Conversation
- Dropped legacy section that showed use of action type unions and hand-written action creators - Copied TS quick start section from RTK docs - Added "what you'll learn / prerequisites" boxes - Added additional details for typing reducers / thunks / middleware - Removed now-duplicate RTK usage info - Added additional RTK common usage patterns info - Added "recommendations" section
|
Size Change: 0 B Total Size: 8.9 kB ℹ️ View Unchanged
|
|
Deploy preview for redux-docs ready! Built with commit 077cf97 |
markerikson
changed the title
docs/recipes/UsageWithTypescript.md
Outdated
|
|
||
| ### Use the React-Redux Hooks API | ||
|
|
||
| **We recommend using the React-Redux hooks API as the default approach**. The hooks API is much simpler to use with TypeScript, as `useSelector` is a simple hook that takes a selector function, and the return type is easily inferred from the type of the `state` argument. |
There was a problem hiding this comment.
Just a note here, some edits have been set to React Redux, while others are React-Redux as it is here. Not a deal, but thought I'd point it out.
Co-authored-by: Matt Sutkowski <[email protected]>
Co-authored-by: Matt Sutkowski <[email protected]>
Co-authored-by: Matt Sutkowski <[email protected]>
Co-authored-by: Matt Sutkowski <[email protected]>
Co-authored-by: Matt Sutkowski <[email protected]>
| const initialState: CounterState = { | ||
| value: 0 | ||
| } |
There was a problem hiding this comment.
small curveball - see reduxjs/redux-toolkit#827 (maybe also add a short explanation as to why we're doing it that way from there)
- const initialState: CounterState = {
+ const initialState = {
value: 0
- }
+ } as CounterState| export const DELETE_MESSAGE = 'DELETE_MESSAGE' | ||
| ```ts title="app/hooks.ts" | ||
| import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux' | ||
| import { RootState, AppDispatch } from './store' |
There was a problem hiding this comment.
Using
import type { RootState, AppDispatch } from './store'
might help some bundlers that work on a per-file level without looking at the type of the imported token and otherwise introduce a runtime dependency to ./store
|
|
||
| Type checked chat reducer: | ||
| If you are using Redux Toolkit's `createSlice`, you should rarely need to specifically type a reducer separately. If you do actually write a standalone reducer, it's typically sufficient to declare the type of the `initialState` value, and type the `action` as `AnyAction<string>`: |
There was a problem hiding this comment.
AnyAction does not accept any arguments, so it's just AnyAction, not AnyAction<string>
| default: | ||
| return state | ||
| } | ||
| action: AnyAction<string> |
There was a problem hiding this comment.
- action: AnyAction<string>
+ action: AnyAction| } | ||
| ```ts | ||
| export interface Middleware< | ||
| DispatchExt = {}, // legacy type parameter that is no longer relevant |
There was a problem hiding this comment.
DispatchExt is what we use extensively in redux toolkit.
It is used to add additional function overloads ("extensions") to the resulting store.dispatch
|
|
||
| export type RootState = ReturnType<typeof rootReducer> | ||
| export const exampleMiddleware: Middleware< | ||
| {}, // legacy type parameter added to satisfy interface signature |
There was a problem hiding this comment.
As mentioned above, not legacy.
Also see https://github.com/reduxjs/redux-toolkit/blob/master/type-tests/files/configureStore.typetest.ts#L252-L264 as an example.
|
|
||
| import { Middleware } from 'redux' | ||
| You will typically want to provide the `R` (return type) and `S` (state) generic arguments. Unfortunately, TS does not allow only providing _some_ generic arguments, so the usual values for the other arguments are `unknown` for `E` and `Action<string>` for `A`: |
There was a problem hiding this comment.
I'd personally prefer AnyAction over Action<string> because it seems to convey the intent a bit more, but that's just my nitpick.
| additionalMiddleware, | ||
| // you can also type middlewares manually | ||
| untypedMiddleware as Middleware< | ||
| (action: Action<'specialAction'>) => number, |
There was a problem hiding this comment.
here's that "legacy" parameter in action ;)
Former-commit-id: 615051a
name: 📖 New/Updated Documentation Content
about: Adding a new docs page, or updating content in an existing docs page
PR Type
Does this PR add a new page, or update an existing page?
Updates the "Usage with TypeScript" page
Checklist
What docs page is being added or updated?
For Updating Existing Content
Also added a new Style Guide entry that says to "organize state by data type, not components"