Skip to content

Commit a3a3ec3

Browse files
committed
Update doc
1 parent 22ba464 commit a3a3ec3

File tree

1 file changed

+16
-18
lines changed

1 file changed

+16
-18
lines changed

README.md

+16-18
Original file line numberDiff line numberDiff line change
@@ -137,13 +137,13 @@ npm run test:coverage:watch
137137

138138
## How to create a reducer?
139139

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.
141141
Follow the steps below to implement your first reducer.
142142

143143
1. Create action types constants, in the `constants` directory:
144144

145145
```js
146-
// src/redux/constants/counter.ts
146+
// src/redux/constants/counter.ts
147147

148148
export const actionTypes = {
149149
COUNTER_DECREMENT: 'COUNTER_DECREMENT',
@@ -154,19 +154,19 @@ export const actionTypes = {
154154
2. Create reducer, in the `reducers` directory:
155155

156156
```js
157-
// src/redux/reducers/counter.ts
157+
// src/redux/reducers/counter.ts
158158

159159
import { actionTypes } from '../constants/counter'
160160

161-
interface IAction {
161+
type Action = {
162162
type: 'COUNTER_DECREMENT' | 'COUNTER_INCREMENT'
163163
}
164164

165165
const INITIAL_STATE = {
166166
counter: 0
167167
}
168168

169-
export const counterReducers = (state = INITIAL_STATE, action: IAction) => {
169+
export const counterReducers = (state = INITIAL_STATE, action: Action) => {
170170
switch (action.type) {
171171
case actionTypes.COUNTER_DECREMENT:
172172
return {
@@ -191,18 +191,19 @@ export const counterReducers = (state = INITIAL_STATE, action: IAction) => {
191191
```js
192192
// src/redux/reducers/index.ts
193193

194+
import { combineReducers } from 'redux'
194195
import { counterReducers } from './counter'
195196

196-
export const reducers = combineReducers({
197+
export const reducers = combineReducers({
197198
// ...
198-
counterReducers
199+
counterReducers
199200
})
200201
```
201202

202203
4. Create action types methods, in the `actions` directory:
203204

204205
```js
205-
// src/redux/actions/counter.ts
206+
// src/redux/actions/counter.ts
206207

207208
import { actionTypes } from '../constants/counter'
208209

@@ -220,7 +221,8 @@ export const actions = {
220221
5. Create selectors, in the `selectors` directory:
221222

222223
```js
223-
// src/redux/selectors/counter.ts
224+
// src/redux/selectors/counter.ts
225+
224226
import { RootStateOrAny } from 'react-redux'
225227

226228
export const selectors = {
@@ -238,13 +240,7 @@ import { useSelector, useDispatch } from 'react-redux'
238240
import { actions } from '../../redux/actions/counter'
239241
import { selectors } from '../../redux/selectors/counter'
240242

241-
interface IUseCounter {
242-
counter: number
243-
handleDecrement: () => void
244-
handleIncrement: () => void
245-
}
246-
247-
export function useCounter (): IUseCounter {
243+
export function useCounter () {
248244
const counter = useSelector(selectors.getCounter)
249245
const dispatch = useDispatch()
250246

@@ -258,7 +254,7 @@ export function useCounter (): IUseCounter {
258254
7. Import custom hook in the component:
259255

260256
```js
261-
// src/components/Counter/index.tsx
257+
// src/components/Counter/index.tsx
262258

263259
import { useCounter } from '../../hooks/useCounter'
264260

@@ -267,7 +263,9 @@ export function Counter () {
267263

268264
return (
269265
<div>
270-
<h1>Counter: {counter}</h1>
266+
<h1>
267+
Counter: {counter}
268+
</h1>
271269

272270
<button onClick={handleDecrement}>
273271
Decrement

0 commit comments

Comments
 (0)