You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/extracting-state-logic-into-a-reducer.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -183,11 +183,11 @@ Each of its event handlers calls `setTasks` in order to update the state. As thi
183
183
184
184
Reducers are a different way to handle state. You can migrate from `useState` to `useReducer` in three steps:
185
185
186
-
1.**Move** from setting state to dispatching actions.
186
+
1.**Move** from setting state to dispatching Actions.
187
187
2.**Write** a reducer function.
188
188
3.**Use** the reducer from your component.
189
189
190
-
### Step 1: Move from setting state to dispatching actions {/*step-1-move-from-setting-state-to-dispatching-actions*/}
190
+
### Step 1: Move from setting state to dispatching Actions {/*step-1-move-from-setting-state-to-dispatching-actions*/}
191
191
192
192
Your event handlers currently specify _what to do_ by setting state:
193
193
@@ -226,7 +226,7 @@ Remove all the state setting logic. What you are left with are three event handl
226
226
-`handleChangeTask(task)` is called when the user toggles a task or presses "Save".
227
227
-`handleDeleteTask(taskId)` is called when the user presses "Delete".
228
228
229
-
Managing state with reducers is slightly different from directly setting state. Instead of telling React "what to do" by setting state, you specify "what the user just did" by dispatching "actions" from your event handlers. (The state update logic will live elsewhere!) So instead of "setting `tasks`" via an event handler, you're dispatching an "added/changed/deleted a task" action. This is more descriptive of the user's intent.
229
+
Managing state with reducers is slightly different from directly setting state. Instead of telling React "what to do" by setting state, you specify "what the user just did" by dispatching "Actions" from your event handlers. (The state update logic will live elsewhere!) So instead of "setting `tasks`" via an event handler, you're dispatching an "added/changed/deleted a task" action. This is more descriptive of the user's intent.
230
230
231
231
```js
232
232
functionhandleAddTask(text) {
@@ -862,7 +862,7 @@ li {
862
862
863
863
</Sandpack>
864
864
865
-
Component logic can be easier to read when you separate concerns like this. Now the event handlers only specify _what happened_ by dispatching actions, and the reducer function determines _how the state updates_ in response to them.
865
+
Component logic can be easier to read when you separate concerns like this. Now the event handlers only specify _what happened_ by dispatching Actions, and the reducer function determines _how the state updates_ in response to them.
866
866
867
867
## Comparing `useState` and `useReducer` {/*comparing-usestate-and-usereducer*/}
Copy file name to clipboardExpand all lines: src/content/learn/managing-state.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -502,7 +502,7 @@ Read **[Preserving and Resetting State](/learn/preserving-and-resetting-state)**
502
502
503
503
## Extracting state logic into a reducer {/*extracting-state-logic-into-a-reducer*/}
504
504
505
-
Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called "reducer". Your event handlers become concise because they only specify the user "actions". At the bottom of the file, the reducer function specifies how the state should update in response to each action!
505
+
Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called "reducer". Your event handlers become concise because they only specify the user "Actions". At the bottom of the file, the reducer function specifies how the state should update in response to each action!
0 commit comments