Skip to content

rename action type from incremented_age to increment_age for clarity #7858

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

rename action type from incremented_age to increment_age for clarity #7858

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions src/content/reference/react/useReducer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ The `dispatch` function returned by `useReducer` lets you update the state to a
const [state, dispatch] = useReducer(reducer, { age: 42 });

function handleClick() {
dispatch({ type: 'incremented_age' });
dispatch({ type: 'increment_age' });
// ...
```

Expand Down Expand Up @@ -116,7 +116,7 @@ To update what's on the screen, call <CodeStep step={2}>`dispatch`</CodeStep> wi

```js [[2, 2, "dispatch"]]
function handleClick() {
dispatch({ type: 'incremented_age' });
dispatch({ type: 'increment_age' });
}
```

Expand All @@ -128,7 +128,7 @@ React will pass the current state and the action to your <CodeStep step={4}>redu
import { useReducer } from 'react';

function reducer(state, action) {
if (action.type === 'incremented_age') {
if (action.type === 'increment_age') {
return {
age: state.age + 1
};
Expand All @@ -142,7 +142,7 @@ export default function Counter() {
return (
<>
<button onClick={() => {
dispatch({ type: 'incremented_age' })
dispatch({ type: 'increment_age' })
}}>
Increment age
</button>
Expand Down Expand Up @@ -177,7 +177,7 @@ Then you need to fill in the code that will calculate and return the next state.
```js {4-7,10-13}
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
case 'increment_age': {
return {
name: state.name,
age: state.age + 1
Expand All @@ -201,7 +201,7 @@ function Form() {
const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 });

function handleButtonClick() {
dispatch({ type: 'incremented_age' });
dispatch({ type: 'increment_age' });
}

function handleInputChange(e) {
Expand All @@ -224,7 +224,7 @@ State is read-only. Don't modify any objects or arrays in state:
```js {4,5}
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
case 'increment_age': {
// 🚩 Don't mutate an object in state like this:
state.age = state.age + 1;
return state;
Expand All @@ -236,7 +236,7 @@ Instead, always return new objects from your reducer:
```js {4-8}
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
case 'increment_age': {
// ✅ Instead, return a new object
return {
...state,
Expand All @@ -262,7 +262,7 @@ import { useReducer } from 'react';

function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
case 'increment_age': {
return {
name: state.name,
age: state.age + 1
Expand All @@ -284,7 +284,7 @@ export default function Form() {
const [state, dispatch] = useReducer(reducer, initialState);

function handleButtonClick() {
dispatch({ type: 'incremented_age' });
dispatch({ type: 'increment_age' });
}

function handleInputChange(e) {
Expand Down Expand Up @@ -947,7 +947,7 @@ Calling the `dispatch` function **does not change state in the running code**:
function handleClick() {
console.log(state.age); // 42

dispatch({ type: 'incremented_age' }); // Request a re-render with 43
dispatch({ type: 'increment_age' }); // Request a re-render with 43
console.log(state.age); // Still 42!

setTimeout(() => {
Expand All @@ -961,7 +961,7 @@ This is because [states behaves like a snapshot.](/learn/state-as-a-snapshot) Up
If you need to guess the next state value, you can calculate it manually by calling the reducer yourself:

```js
const action = { type: 'incremented_age' };
const action = { type: 'increment_age' };
dispatch(action);

const nextState = reducer(state, action);
Expand All @@ -978,7 +978,7 @@ React will **ignore your update if the next state is equal to the previous state
```js {4-5,9-10}
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
case 'increment_age': {
// 🚩 Wrong: mutating existing object
state.age++;
return state;
Expand All @@ -998,7 +998,7 @@ You mutated an existing `state` object and returned it, so React ignored the upd
```js {4-8,11-15}
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
case 'increment_age': {
// ✅ Correct: creating a new object
return {
...state,
Expand Down Expand Up @@ -1026,7 +1026,7 @@ Make sure that every `case` branch **copies all of the existing fields** when re
```js {5}
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
case 'increment_age': {
return {
...state, // Don't forget this!
age: state.age + 1
Expand All @@ -1046,7 +1046,7 @@ If your state unexpectedly becomes `undefined`, you're likely forgetting to `ret
```js {10}
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
case 'increment_age': {
// ...
}
case 'edited_name': {
Expand Down