16 |
17 |
20 |
21 | {count}
22 |
23 |
26 |
27 |
28 | setIncrementAmount(Number(e.target.value ?? 0))}
33 | />
34 |
35 |
36 |
37 |
38 |
39 | )
40 | }
41 |
42 | export default Counter
43 |
--------------------------------------------------------------------------------
/app/src/redux/slices/counterSlice/counterSlice.ts:
--------------------------------------------------------------------------------
1 | /* Core */
2 | import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
3 |
4 | /* Instruments */
5 | import { incrementAsync } from './thunks'
6 |
7 | const initialState: CounterSliceState = {
8 | value: 0,
9 | status: 'idle'
10 | }
11 |
12 | export const counterSlice = createSlice({
13 | name: 'counter',
14 | initialState,
15 | // The `reducers` field lets us define reducers and generate associated actions
16 | reducers: {
17 | increment: (state) => {
18 | // Redux Toolkit allows us to write "mutating" logic in reducers. It
19 | // doesn't actually mutate the state because it uses the Immer library,
20 | // which detects changes to a "draft state" and produces a brand new
21 | // immutable state based off those changes
22 | state.value += 1
23 | },
24 | decrement: (state) => {
25 | state.value -= 1
26 | },
27 | // Use the PayloadAction type to declare the contents of `action.payload`
28 | incrementByAmount: (state, action: PayloadAction