@@ -137,13 +137,13 @@ npm run test:coverage:watch
137
137
138
138
## How to create a reducer?
139
139
140
- As an example, let's implement a counter component reducer. Files are also available in the repository.
140
+ As an example, let's implement a counter component reducer. Files are also available in the repository.
141
141
Follow the steps below to implement your first reducer.
142
142
143
143
1 . Create action types constants, in the ` constants ` directory:
144
144
145
145
``` js
146
- // src/redux/constants/counter.ts
146
+ // src/redux/constants/counter.ts
147
147
148
148
export const actionTypes = {
149
149
COUNTER_DECREMENT : ' COUNTER_DECREMENT' ,
@@ -154,19 +154,19 @@ export const actionTypes = {
154
154
2 . Create reducer, in the ` reducers ` directory:
155
155
156
156
``` js
157
- // src/redux/reducers/counter.ts
157
+ // src/redux/reducers/counter.ts
158
158
159
159
import { actionTypes } from ' ../constants/counter'
160
160
161
- interface IAction {
161
+ type Action = {
162
162
type: ' COUNTER_DECREMENT' | ' COUNTER_INCREMENT'
163
163
}
164
164
165
165
const INITIAL_STATE = {
166
166
counter: 0
167
167
}
168
168
169
- export const counterReducers = (state = INITIAL_STATE , action : IAction ) => {
169
+ export const counterReducers = (state = INITIAL_STATE , action : Action ) => {
170
170
switch (action .type ) {
171
171
case actionTypes .COUNTER_DECREMENT :
172
172
return {
@@ -191,18 +191,19 @@ export const counterReducers = (state = INITIAL_STATE, action: IAction) => {
191
191
``` js
192
192
// src/redux/reducers/index.ts
193
193
194
+ import { combineReducers } from ' redux'
194
195
import { counterReducers } from ' ./counter'
195
196
196
- export const reducers = combineReducers ({
197
+ export const reducers = combineReducers ({
197
198
// ...
198
- counterReducers
199
+ counterReducers
199
200
})
200
201
```
201
202
202
203
4 . Create action types methods, in the ` actions ` directory:
203
204
204
205
``` js
205
- // src/redux/actions/counter.ts
206
+ // src/redux/actions/counter.ts
206
207
207
208
import { actionTypes } from ' ../constants/counter'
208
209
@@ -220,7 +221,8 @@ export const actions = {
220
221
5 . Create selectors, in the ` selectors ` directory:
221
222
222
223
``` js
223
- // src/redux/selectors/counter.ts
224
+ // src/redux/selectors/counter.ts
225
+
224
226
import { RootStateOrAny } from ' react-redux'
225
227
226
228
export const selectors = {
@@ -238,13 +240,7 @@ import { useSelector, useDispatch } from 'react-redux'
238
240
import { actions } from ' ../../redux/actions/counter'
239
241
import { selectors } from ' ../../redux/selectors/counter'
240
242
241
- interface IUseCounter {
242
- counter: number
243
- handleDecrement : () => void
244
- handleIncrement : () => void
245
- }
246
-
247
- export function useCounter (): IUseCounter {
243
+ export function useCounter () {
248
244
const counter = useSelector (selectors .getCounter )
249
245
const dispatch = useDispatch ()
250
246
@@ -258,7 +254,7 @@ export function useCounter (): IUseCounter {
258
254
7 . Import custom hook in the component:
259
255
260
256
``` js
261
- // src/components/Counter/index.tsx
257
+ // src/components/Counter/index.tsx
262
258
263
259
import { useCounter } from ' ../../hooks/useCounter'
264
260
@@ -267,7 +263,9 @@ export function Counter () {
267
263
268
264
return (
269
265
< div>
270
- < h1> Counter: {counter}< / h1>
266
+ < h1>
267
+ Counter: {counter}
268
+ < / h1>
271
269
272
270
< button onClick= {handleDecrement}>
273
271
Decrement
0 commit comments