Skip to content

Commit

Permalink
Update part-5-async-logic.md
Browse files Browse the repository at this point in the history
Fixed some typos and highlighting
  • Loading branch information
matthiasnagel authored Oct 29, 2024
1 parent 025adaa commit 91bade9
Showing 1 changed file with 11 additions and 4 deletions.
15 changes: 11 additions & 4 deletions docs/tutorials/essentials/part-5-async-logic.md
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ We _could_ track that information using some booleans, like `isLoading: true`, b
```ts
{
// Multiple possible status enum values
status: 'idle' | 'pending' | 'succeeded' | 'failed',
status: 'idle' | 'pending' | 'succeeded' | 'rejected',
error: string | null
}
```
Expand Down Expand Up @@ -508,7 +508,7 @@ const postsSlice = createSlice({
state.posts.push(...action.payload)
})
.addCase(fetchPosts.rejected, (state, action) => {
state.status = 'failed'
state.status = 'rejected'
state.error = action.error.message ?? 'Unknown Error'
})
// highlight-end
Expand All @@ -520,7 +520,7 @@ We'll handle all three action types that could be dispatched by the thunk, based

- When the request starts, we'll set the `status` enum to `'pending'`
- If the request succeeds, we mark the `status` as `'succeeded'`, and add the fetched posts to `state.posts`
- If the request fails, we'll mark the `status` as `'failed'`, and save any error message into the state so we can display it
- If the request fails, we'll mark the `status` as `'rejected'`, and save any error message into the state so we can display it

### Dispatching Thunks from Components

Expand Down Expand Up @@ -1026,6 +1026,12 @@ const postsSlice = createSlice({
// highlight-end
}
})

// highlight-start
// Remove `postAdded`
export const { postUpdated, reactionAdded } = postsSlice.actions
// highlight-end

```

### Checking Thunk Results in Components
Expand All @@ -1052,10 +1058,11 @@ import { addNewPost } from './postsSlice'
// omit field types

export const AddPostForm = () => {
// highlight-next-line
// highlight-start
const [addRequestStatus, setAddRequestStatus] = useState<'idle' | 'pending'>(
'idle'
)
// highlight-end

const dispatch = useAppDispatch()
const userId = useAppSelector(selectCurrentUsername)!
Expand Down

0 comments on commit 91bade9

Please sign in to comment.