From e6146c656bbe7036924685ab59c8be49b422f204 Mon Sep 17 00:00:00 2001
From: Ika <ngnl834@gmail.com>
Date: Sat, 11 Dec 2021 22:57:22 +0800
Subject: [PATCH 01/23] docs(cn): scaling-up-with-reducer-and-context

---
 .../scaling-up-with-reducer-and-context.md    | 425 ++++++++++--------
 1 file changed, 245 insertions(+), 180 deletions(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 2bc0877c3d..a74581ad56 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -1,29 +1,29 @@
 ---
-title: Scaling Up with Reducer and Context
+title: 使用 Reducer 和 Context 来拓展你的应用
 ---
 
 <Intro>
 
-Reducers let you consolidate a component's state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
+Reducer 可以整合组件的状态更新逻辑。Context 可以将信息深入传递给其他组件。你可以组合使用它们来共同管理一个复杂页面的状态。
 
 </Intro>
 
 <YouWillLearn>
 
-* How to combine a reducer with context
-* How to avoid passing state and dispatch through props
-* How to keep context and state logic in a separate file
+* 如何结合使用 reducer 和 context
+* 如何去避免通过 props 传递 state 和 dispatch
+* 如何将 context 和状态逻辑保存在一个单独的文件中
 
 </YouWillLearn>
 
-## Combining a reducer with context {/*combining-a-reducer-with-context*/}
+## 结合使用 reducer 和 context {/*combining-a-reducer-with-context*/}
 
-In this example from [the introduction to reducers](/learn/extracting-state-logic-into-a-reducer), the state is managed by a reducer. The reducer function contains all of the state update logic and is declared at the bottom of this file:
+在 [reducer 介绍](/learn/extracting-state-logic-into-a-reducer)的例子里面，状态被reducer所管理。reducer函数包含了所有的状态更新逻辑并在此文件的底部声明：
 
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
@@ -99,16 +99,16 @@ function tasksReducer(tasks, action) {
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true },
-  { id: 1, text: 'Visit the temple', done: false },
-  { id: 2, text: 'Drink matcha', done: false }
+  {id: 0, text: 'Philosopher’s Path', done: true},
+  {id: 1, text: 'Visit the temple', done: false},
+  {id: 2, text: 'Drink matcha', done: false}
 ];
 ```
 
 ```js AddTask.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   return (
     <>
@@ -120,20 +120,21 @@ export default function AddTask({ onAddTask }) {
       <button onClick={() => {
         setText('');
         onAddTask(text);
-      }}>Add</button>
+      }}>Add
+      </button>
     </>
   )
 }
 ```
 
 ```js TaskList.js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function TaskList({
-  tasks,
-  onChangeTask,
-  onDeleteTask
-}) {
+                                   tasks,
+                                   onChangeTask,
+                                   onDeleteTask
+                                 }) {
   return (
     <ul>
       {tasks.map(task => (
@@ -149,7 +150,7 @@ export default function TaskList({
   );
 }
 
-function Task({ task, onChange, onDelete }) {
+function Task({task, onChange, onDelete}) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -162,7 +163,7 @@ function Task({ task, onChange, onDelete }) {
               ...task,
               text: e.target.value
             });
-          }} />
+          }}/>
         <button onClick={() => setIsEditing(false)}>
           Save
         </button>
@@ -200,16 +201,26 @@ function Task({ task, onChange, onDelete }) {
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+    margin: 5px;
+}
+
+li {
+    list-style-type: none;
+}
+
+ul, li {
+    margin: 0;
+    padding: 0;
+}
 ```
 
 </Sandpack>
 
-A reducer helps keep the event handlers short and concise. However, as your app grows, you might run into another difficulty. **Currently, the `tasks` state and the `dispatch` function are only available in the top-level `TaskBoard` component.** To let other components read the list of tasks or change it, you have to explicitly [pass down](/learn/passing-props-to-a-component) the current state and the event handlers that change it as props.
+reducer 有助于事件处理程序简短明了。但随着应用越来越大，你有可能会遇到别的困难。**目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用** 若要让其他组件读取 `tasks`
+状态或对其进行更改，必须以 props 的形式显式[传递](/learn/passing-props-to-a-component)它。
 
-For example, `TaskBoard` passes a list of tasks and the event handlers to `TaskList`:
+例如，`TaskBoard` 将 `tasks` 和事件处理程序传递给 `TaskList`：
 
 ```js
 <TaskList
@@ -219,7 +230,7 @@ For example, `TaskBoard` passes a list of tasks and the event handlers to `TaskL
 />
 ```
 
-And `TaskList` passes the event handlers to `Task`:
+`TaskList` 将事件处理器传递给 `Task`：
 
 ```js
 <Task
@@ -229,39 +240,40 @@ And `TaskList` passes the event handlers to `Task`:
 />
 ```
 
-In a small example like this, this works well, but if you have tens or hundreds of components in the middle, passing down all state and functions can be quite frustrating!
+他能工作的非常好在诸如这样的小例子中，但是如果你有成千上百个组件时，传递所有状态和函数会让人非常烦恼！
 
 <!--(TODO: illustration of prop drilling)-->
 
-This is why, as an alternative to passing them through props, you might want to put both the `tasks` state and the `dispatch` function [into context](/learn/passing-data-deeply-with-context). **This way, any component below `TaskBoard` in the tree can read the tasks and dispatch actions without the repetitive "prop drilling".**
+这就是为什么，比起通过 props 传递它们，你可能想把 `tasks` 状态和 `dispatch` 函数都 [放入 context](/learn/passing-data-deeply-with-context)。**
+这样，所有的在 `TaskBoard` 组件树之下的组件都不必一直往下传 props 而可以直接读取 tasks 和 dispatch 函数 **
 
 <!--(TODO: illustration of context)-->
 
-Here is how you can combine a reducer with context:
+下面将介绍如何结合使用 reducer 和 context：
 
-1. **Create** the context.
-2. **Put** state and dispatch into context.
-3. **Use** context anywhere in the tree.
+1. **创建** context。
+2. 将 state 和 dispatch **放入** context。
+3. 在组件树的任何地方 **使用** context。
 
-### Step 1: Create the context {/*step-1-create-the-context*/}
+### 第一步: 创建 context {/*step-1-create-the-context*/}
 
-The `useReducer` Hook returns the current `tasks` and the `dispatch` function that lets you update them:
+`useReducer` 返回当前的 `tasks` 和 `dispatch` 函数来让你更新它们：
 
 ```js
 const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 ```
 
-To pass them down the tree, you will [create](/learn/passing-data-deeply-with-context#step-2-use-the-context) two separate contexts:
+为了将他们从组件树往下传，你将 [创建](/learn/passing-data-deeply-with-context#step-2-use-the-context) 两个不同的 context：
 
-- `TasksContext` provides the current list of tasks.
-- `TasksDispatchContext` provides the function that lets components dispatch actions.
+- `TasksContext` 提供当前的 tasks 列表。
+- `TasksDispatchContext` 提供了一个函数可以让组件分发动作。
 
-Export them from a separate file so that you can later import them from other files:
+将它们从单独的文件导出，以便以后可以从其他文件导入它们：
 
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
@@ -337,23 +349,23 @@ function tasksReducer(tasks, action) {
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true },
-  { id: 1, text: 'Visit the temple', done: false },
-  { id: 2, text: 'Drink matcha', done: false }
+  {id: 0, text: 'Philosopher’s Path', done: true},
+  {id: 1, text: 'Visit the temple', done: false},
+  {id: 2, text: 'Drink matcha', done: false}
 ];
 ```
 
 ```js TasksContext.js active
-import { createContext } from 'react';
+import {createContext} from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
 ```js AddTask.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   return (
     <>
@@ -365,20 +377,21 @@ export default function AddTask({ onAddTask }) {
       <button onClick={() => {
         setText('');
         onAddTask(text);
-      }}>Add</button>
+      }}>Add
+      </button>
     </>
   )
 }
 ```
 
 ```js TaskList.js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function TaskList({
-  tasks,
-  onChangeTask,
-  onDeleteTask
-}) {
+                                   tasks,
+                                   onChangeTask,
+                                   onDeleteTask
+                                 }) {
   return (
     <ul>
       {tasks.map(task => (
@@ -394,7 +407,7 @@ export default function TaskList({
   );
 }
 
-function Task({ task, onChange, onDelete }) {
+function Task({task, onChange, onDelete}) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -407,7 +420,7 @@ function Task({ task, onChange, onDelete }) {
               ...task,
               text: e.target.value
             });
-          }} />
+          }}/>
         <button onClick={() => setIsEditing(false)}>
           Save
         </button>
@@ -445,21 +458,31 @@ function Task({ task, onChange, onDelete }) {
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+    margin: 5px;
+}
+
+li {
+    list-style-type: none;
+}
+
+ul, li {
+    margin: 0;
+    padding: 0;
+}
 ```
 
 </Sandpack>
 
-Here, you're passing `null` as the default value to both contexts. The actual values will be provided by the `TaskBoard` component.
+在这里，您将 `null` 作为默认值传递给两个 context。实际值将由 `TaskBoard` 组件提供。
 
-### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/}
+### 第二步: 将 state 和 dispatch 函数 放入context {/*step-2-put-state-and-dispatch-into-context*/}
 
-Now you can import both contexts in your `TaskBoard` component. Take the `tasks` and `dispatch` returned by `useReducer()` and [provide them](/learn/passing-data-deeply-with-context#step-3-provide-the-context) to the entire tree below:
+现在，您可以将所有的 context 导入 `TaskBoard` 组件。获取 `useReducer()` 返回的 `tasks` 和 `dispatch`
+并将它们[提供](/learn/passing-data-deeply-with-context#step-3-provide-the-context)给整个组件树：
 
 ```js {4,7-8}
-import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+import {TasksContext, TasksDispatchContext} from './TasksContext.js';
 
 export default function TaskBoard() {
   const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
@@ -474,15 +497,15 @@ export default function TaskBoard() {
 }
 ```
 
-For now, you pass the information both via props and in context:
+现在，您可以同时通过 props 和 context 传递信息：
 
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
-import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+import {TasksContext, TasksDispatchContext} from './TasksContext.js';
 
 export default function TaskBoard() {
   const [tasks, dispatch] = useReducer(
@@ -558,23 +581,23 @@ function tasksReducer(tasks, action) {
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true },
-  { id: 1, text: 'Visit the temple', done: false },
-  { id: 2, text: 'Drink matcha', done: false }
+  {id: 0, text: 'Philosopher’s Path', done: true},
+  {id: 1, text: 'Visit the temple', done: false},
+  {id: 2, text: 'Drink matcha', done: false}
 ];
 ```
 
 ```js TasksContext.js
-import { createContext } from 'react';
+import {createContext} from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
 ```js AddTask.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   return (
     <>
@@ -586,20 +609,21 @@ export default function AddTask({ onAddTask }) {
       <button onClick={() => {
         setText('');
         onAddTask(text);
-      }}>Add</button>
+      }}>Add
+      </button>
     </>
   )
 }
 ```
 
 ```js TaskList.js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function TaskList({
-  tasks,
-  onChangeTask,
-  onDeleteTask
-}) {
+                                   tasks,
+                                   onChangeTask,
+                                   onDeleteTask
+                                 }) {
   return (
     <ul>
       {tasks.map(task => (
@@ -615,7 +639,7 @@ export default function TaskList({
   );
 }
 
-function Task({ task, onChange, onDelete }) {
+function Task({task, onChange, onDelete}) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -628,7 +652,7 @@ function Task({ task, onChange, onDelete }) {
               ...task,
               text: e.target.value
             });
-          }} />
+          }}/>
         <button onClick={() => setIsEditing(false)}>
           Save
         </button>
@@ -666,41 +690,50 @@ function Task({ task, onChange, onDelete }) {
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+    margin: 5px;
+}
+
+li {
+    list-style-type: none;
+}
+
+ul, li {
+    margin: 0;
+    padding: 0;
+}
 ```
 
 </Sandpack>
 
-In the next step, you will remove prop passing.
+在下一步中，你将删除通过 props 传递的代码。
 
-### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/}
+### Step 3: 在组件树中的任何地方使用 context {/*step-3-use-context-anywhere-in-the-tree*/}
 
-Now you don't need to pass the list of tasks or the event handlers down the tree:
+现在你不需要将 tasks 和事件处理程序在组件树中传递：
 
 ```js {4-5}
 <TasksContext.Provider value={tasks}>
   <TasksDispatchContext.Provider value={dispatch}>
     <h1>Day off in Kyoto</h1>
-    <AddTask />
-    <TaskList />
+    <AddTask/>
+    <TaskList/>
   </TasksDispatchContext.Provider>
 </TasksContext.Provider>
 ```
 
-Instead, any component that needs the task list can read it from the `TaskContext`:
+相反，任何需要 tasks 的组件都可以从 `TaskContext` 中读取它：
 
 ```js {2}
 export default function TaskList() {
   const tasks = useContext(TasksContext);
-  // ...
+// ...
 ```
 
-To update the task list, any component can read the `dispatch` function from context and call it:
+要更新任务列表，任何组件都可以从 context 中读取 `dispatch` 函数并调用它：
 
 ```js {3,9-13}
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   const dispatch = useContext(TasksDispatchContext);
   // ...
@@ -714,18 +747,18 @@ export default function AddTask({ onAddTask }) {
         text: text,
       });
     }}>Add</button>
-    // ...
+// ...
 ```
 
-**The `TaskBoard` component does not pass any event handlers down, and the `TaskList` does not pass any event handlers to the `Task` component either.** Each component reads the context that it needs:
+**`TaskBoard` 组件不会向下传递任何事件处理程序， `TaskList` 也不会。** 每个组件都会读取它需要的 context：
 
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
-import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+import {TasksContext, TasksDispatchContext} from './TasksContext.js';
 
 export default function TaskBoard() {
   const [tasks, dispatch] = useReducer(
@@ -737,8 +770,8 @@ export default function TaskBoard() {
     <TasksContext.Provider value={tasks}>
       <TasksDispatchContext.Provider value={dispatch}>
         <h1>Day off in Kyoto</h1>
-        <AddTask />
-        <TaskList />
+        <AddTask/>
+        <TaskList/>
       </TasksDispatchContext.Provider>
     </TasksContext.Provider>
   );
@@ -772,24 +805,24 @@ function tasksReducer(tasks, action) {
 }
 
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true },
-  { id: 1, text: 'Visit the temple', done: false },
-  { id: 2, text: 'Drink matcha', done: false }
+  {id: 0, text: 'Philosopher’s Path', done: true},
+  {id: 1, text: 'Visit the temple', done: false},
+  {id: 2, text: 'Drink matcha', done: false}
 ];
 ```
 
 ```js TasksContext.js
-import { createContext } from 'react';
+import {createContext} from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
 ```js AddTask.js
-import { useState, useContext } from 'react';
-import { TasksDispatchContext } from './TasksContext.js';
+import {useState, useContext} from 'react';
+import {TasksDispatchContext} from './TasksContext.js';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   const dispatch = useContext(TasksDispatchContext);
   return (
@@ -805,8 +838,9 @@ export default function AddTask({ onAddTask }) {
           type: 'added',
           id: nextId++,
           text: text,
-        }); 
-      }}>Add</button>
+        });
+      }}>Add
+      </button>
     </>
   );
 }
@@ -815,8 +849,8 @@ let nextId = 3;
 ```
 
 ```js TaskList.js active
-import { useState, useContext } from 'react';
-import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+import {useState, useContext} from 'react';
+import {TasksContext, TasksDispatchContext} from './TasksContext.js';
 
 export default function TaskList() {
   const tasks = useContext(TasksContext);
@@ -824,14 +858,14 @@ export default function TaskList() {
     <ul>
       {tasks.map(task => (
         <li key={task.id}>
-          <Task task={task} />
+          <Task task={task}/>
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({ task }) {
+function Task({task}) {
   const [isEditing, setIsEditing] = useState(false);
   const dispatch = useContext(TasksDispatchContext);
   let taskContent;
@@ -848,7 +882,7 @@ function Task({ task }) {
                 text: e.target.value
               }
             });
-          }} />
+          }}/>
         <button onClick={() => setIsEditing(false)}>
           Save
         </button>
@@ -894,34 +928,43 @@ function Task({ task }) {
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+    margin: 5px;
+}
+
+li {
+    list-style-type: none;
+}
+
+ul, li {
+    margin: 0;
+    padding: 0;
+}
 ```
 
 </Sandpack>
 
-**The state still "lives" in the top-level `TaskBoard` component, managed with `useReducer`.** But its `tasks` and `dispatch` are now available to every component below in the tree by importing and using these contexts.
+**state 仍然"存在于"顶层"TaskBoard"组件中，由 `useReducer` 进行管理。** 不过，组件树里的组件只要导入这些 contexts 之后就可以获取 `tasks` 和 `dispatch`。
 
-## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/}
+## 将所有的连接部分放入一个文件 {/*moving-all-wiring-into-a-single-file*/}
 
-You don't have to do this, but you could further declutter the components by moving both reducer and context into a single file. Currently, `TasksContext.js` contains only two context declarations:
+虽然不是必要的，但你可以通过将 reducer 和 context 移动到单个文件中来进一步整理组件。目前，"TasksContext.js"仅包含两个 context 声明：
 
 ```js
-import { createContext } from 'react';
+import {createContext} from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
-This file is about to get crowded! You'll move the reducer into that same file. Then you'll declare a new `TasksProvider` component in the same file. This component will tie all the pieces together:
+这个文件即将变得臃肿！你将会把 reducer 移动到同一文件中。然后，你将在这个文件中声明一个新的 `TasksProvider` 组件。此组件将所有部分连接在一起：
 
-1. It will manage the state with a reducer.
-2. It will provide both contexts to components below.
-3. It will [take `children` as a prop](/learn/passing-props-to-a-component#passing-jsx-as-children) so you can pass JSX to it.
+1. 它将管理 reducer 的状态。
+2. 它将提供所有的 context 给组件树。
+3. 它将 [把子元素作为 prop](/learn/passing-props-to-a-component#passing-jsx-as-children)，所以你可以传递 JSX。
 
 ```js
-export function TasksProvider({ children }) {
+export function TasksProvider({children}) {
   const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   return (
@@ -934,33 +977,33 @@ export function TasksProvider({ children }) {
 }
 ```
 
-**This removes all the complexity and wiring from your `TaskBoard` component:**
+**这将从你的 `TaskBoard` 组件中移除所有错综复杂的东西：**
 
 <Sandpack>
 
 ```js App.js
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
-import { TasksProvider } from './TasksContext.js';
+import {TasksProvider} from './TasksContext.js';
 
 export default function TaskBoard() {
   return (
     <TasksProvider>
       <h1>Day off in Kyoto</h1>
-      <AddTask />
-      <TaskList />
+      <AddTask/>
+      <TaskList/>
     </TasksProvider>
   );
 }
 ```
 
 ```js TasksContext.js
-import { createContext, useReducer } from 'react';
+import {createContext, useReducer} from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 
-export function TasksProvider({ children }) {
+export function TasksProvider({children}) {
   const [tasks, dispatch] = useReducer(
     tasksReducer,
     initialTasks
@@ -1003,17 +1046,17 @@ function tasksReducer(tasks, action) {
 }
 
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true },
-  { id: 1, text: 'Visit the temple', done: false },
-  { id: 2, text: 'Drink matcha', done: false }
+  {id: 0, text: 'Philosopher’s Path', done: true},
+  {id: 1, text: 'Visit the temple', done: false},
+  {id: 2, text: 'Drink matcha', done: false}
 ];
 ```
 
 ```js AddTask.js
-import { useState, useContext } from 'react';
-import { TasksDispatchContext } from './TasksContext.js';
+import {useState, useContext} from 'react';
+import {TasksDispatchContext} from './TasksContext.js';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   const dispatch = useContext(TasksDispatchContext);
   return (
@@ -1029,8 +1072,9 @@ export default function AddTask({ onAddTask }) {
           type: 'added',
           id: nextId++,
           text: text,
-        }); 
-      }}>Add</button>
+        });
+      }}>Add
+      </button>
     </>
   );
 }
@@ -1039,8 +1083,8 @@ let nextId = 3;
 ```
 
 ```js TaskList.js
-import { useState, useContext } from 'react';
-import { TasksContext, TasksDispatchContext } from './TasksContext.js';
+import {useState, useContext} from 'react';
+import {TasksContext, TasksDispatchContext} from './TasksContext.js';
 
 export default function TaskList() {
   const tasks = useContext(TasksContext);
@@ -1048,14 +1092,14 @@ export default function TaskList() {
     <ul>
       {tasks.map(task => (
         <li key={task.id}>
-          <Task task={task} />
+          <Task task={task}/>
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({ task }) {
+function Task({task}) {
   const [isEditing, setIsEditing] = useState(false);
   const dispatch = useContext(TasksDispatchContext);
   let taskContent;
@@ -1072,7 +1116,7 @@ function Task({ task }) {
                 text: e.target.value
               }
             });
-          }} />
+          }}/>
         <button onClick={() => setIsEditing(false)}>
           Save
         </button>
@@ -1118,14 +1162,23 @@ function Task({ task }) {
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+    margin: 5px;
+}
+
+li {
+    list-style-type: none;
+}
+
+ul, li {
+    margin: 0;
+    padding: 0;
+}
 ```
 
 </Sandpack>
 
-You can also export functions that _use_ the context from `TasksContext.js`:
+你也可以从 `TasksContext.js` 中导出使用 context 的函数：
 
 ```js
 export function useTasks() {
@@ -1137,41 +1190,42 @@ export function useTasksDispatch() {
 }
 ```
 
-When a component needs to read context, it can do it through these functions:
+当一个组件需要读取 context，它可以通过以下函数实现：
 
 ```js {5-7}
 const tasks = useTasks();
 const dispatch = useTasksDispatch();
 ```
 
-This doesn't change the behavior in any way, but it lets you later split these contexts further or add some logic to these functions. **Now all of the context and reducer wiring is in `TasksContext.js`. This keeps the components clean and uncluttered, focused on what they display rather than where they get the data:**
+这不会以任何方式改变行为，但它允许您稍后进一步分割这些 context 或向这些函数添加一些逻辑。**现在所有的 context 和 reducer 连接部分都在 `TasksContext.js`
+中。这保持了组件的干净和整洁，让我们专注于它们显示的内容，而不是它们从哪里获得数据：**
 
 <Sandpack>
 
 ```js App.js
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
-import { TasksProvider } from './TasksContext.js';
+import {TasksProvider} from './TasksContext.js';
 
 export default function TaskBoard() {
   return (
     <TasksProvider>
       <h1>Day off in Kyoto</h1>
-      <AddTask />
-      <TaskList />
+      <AddTask/>
+      <TaskList/>
     </TasksProvider>
   );
 }
 ```
 
 ```js TasksContext.js
-import { createContext, useContext, useReducer } from 'react';
+import {createContext, useContext, useReducer} from 'react';
 
 const TasksContext = createContext(null);
 
 const TasksDispatchContext = createContext(null);
 
-export function TasksProvider({ children }) {
+export function TasksProvider({children}) {
   const [tasks, dispatch] = useReducer(
     tasksReducer,
     initialTasks
@@ -1222,17 +1276,17 @@ function tasksReducer(tasks, action) {
 }
 
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true },
-  { id: 1, text: 'Visit the temple', done: false },
-  { id: 2, text: 'Drink matcha', done: false }
+  {id: 0, text: 'Philosopher’s Path', done: true},
+  {id: 1, text: 'Visit the temple', done: false},
+  {id: 2, text: 'Drink matcha', done: false}
 ];
 ```
 
 ```js AddTask.js
-import { useState, useContext } from 'react';
-import { useTasksDispatch } from './TasksContext.js';
+import {useState, useContext} from 'react';
+import {useTasksDispatch} from './TasksContext.js';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   const dispatch = useTasksDispatch();
   return (
@@ -1248,8 +1302,9 @@ export default function AddTask({ onAddTask }) {
           type: 'added',
           id: nextId++,
           text: text,
-        }); 
-      }}>Add</button>
+        });
+      }}>Add
+      </button>
     </>
   );
 }
@@ -1258,8 +1313,8 @@ let nextId = 3;
 ```
 
 ```js TaskList.js active
-import { useState, useContext } from 'react';
-import { useTasks, useTasksDispatch } from './TasksContext.js';
+import {useState, useContext} from 'react';
+import {useTasks, useTasksDispatch} from './TasksContext.js';
 
 export default function TaskList() {
   const tasks = useTasks();
@@ -1267,14 +1322,14 @@ export default function TaskList() {
     <ul>
       {tasks.map(task => (
         <li key={task.id}>
-          <Task task={task} />
+          <Task task={task}/>
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({ task }) {
+function Task({task}) {
   const [isEditing, setIsEditing] = useState(false);
   const dispatch = useTasksDispatch();
   let taskContent;
@@ -1291,7 +1346,7 @@ function Task({ task }) {
                 text: e.target.value
               }
             });
-          }} />
+          }}/>
         <button onClick={() => setIsEditing(false)}>
           Save
         </button>
@@ -1337,30 +1392,40 @@ function Task({ task }) {
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+    margin: 5px;
+}
+
+li {
+    list-style-type: none;
+}
+
+ul, li {
+    margin: 0;
+    padding: 0;
+}
 ```
 
 </Sandpack>
 
-You can think of `TasksProvider` as a part of the screen that knows how to deal with tasks, `useTasks` as a way to read them, and `useTasksDispatch` as a way to update them from any component below in the tree.
+你可能会想 `TasksProvider` 作为页面的一部分是如何处理 tasks 的，`useTasks` 用来读取它们，`useTasksDispatch` 用来从组件树下的任何组件更新它们。
 
-> Functions like `useTasks` and `useTasksDispatch` are called **[Custom Hooks](/learn/reusing-logic-with-custom-hooks).** Your function is considered a custom Hook if its name starts with `use`. This lets you use other Hooks, like `useContext`, inside it.
+> 像 `useTasks` 和 `useTasksDispatch` 被称为 **[自定义钩子](/learn/reusing-logic-with-custom-hooks).** 如果你的函数名以 `use` 开头，它就被认为是一个自定义钩子。这让你可以使用其他hook，比如 `useContext`。
 
-As your app grows, you may have many context-reducer pairs like this. This is a powerful way to scale your app and [lift state up](/learn/sharing-state-between-components) without too much work whenever you want to access the data deep in the tree.
+随着应用的增长，你可能会有许多这样的 context 和 reducer 的组合。这是一种强大的方法，可以拓展你的应用并 [提升状态] (/learn/sharing-state-between-components)
+，而无需在你想要访问组件树深处的数据时进行太多工作。
 
 <Recap>
 
-- You can combine reducer with context to let any component read and update state above it.
-- To provide state and the dispatch function to components below:
-  1. Create two contexts (for state and for dispatch functions).
-  2. Provide both contexts from the component that uses the reducer.
-  3. Use either context from components that need to read them.
-- You can further declutter the components by moving all wiring into one file.
-  - You can export a component like `TasksProvider` that provides context.
-  - You can also export custom Hooks like `useTasks` and `useTasksDispatch` to read it.
-- You can have many context-reducer pairs like this in your app.
+- 你可以将 reducer 与 context 相结合，让任何组件读取和更新它的状态。
+- 为子组件提供 state 和 dispatch 函数：
+    1. 创建两个 context (一个用于 state,一个用于 dispatch 函数)。
+    2. 让组件的 context 使用 reducer。
+    3. 使用组件中需要读取的 context。
+- 你可以通过将所有传递信息的代码移动到单个文件中来进一步整理组件。
+    - 你可以导出一个像 `TasksProvider` 可以提供 context 的组件。
+    - 你也可以导出自定义钩子像 `useTasks` 和 `useTasksDispatch` 。
+- 你可以在你的应用程序中大量配合使用 context 和 reducer。
 
 </Recap>
 

From ded01077760a3ed21994ceb4bdfa59fb1218b6f2 Mon Sep 17 00:00:00 2001
From: Ika <ngnl834@gmail.com>
Date: Sun, 19 Dec 2021 23:42:19 +0800
Subject: [PATCH 02/23] docs(cn): scaling-up-with-reducer-and-context

---
 .../scaling-up-with-reducer-and-context.md    | 888 +++++++++---------
 1 file changed, 421 insertions(+), 467 deletions(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index a74581ad56..068fcaec87 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -10,32 +10,29 @@ Reducer 可以整合组件的状态更新逻辑。Context 可以将信息深入
 
 <YouWillLearn>
 
-* 如何结合使用 reducer 和 context
-* 如何去避免通过 props 传递 state 和 dispatch
-* 如何将 context 和状态逻辑保存在一个单独的文件中
+- 如何结合使用 reducer 和 context
+- 如何去避免通过 props 传递 state 和 dispatch
+- 如何将 context 和状态逻辑保存在一个单独的文件中
 
 </YouWillLearn>
 
-## 结合使用 reducer 和 context {/*combining-a-reducer-with-context*/}
+## 结合使用 reducer 和 context {/_combining-a-reducer-with-context_/}
 
-在 [reducer 介绍](/learn/extracting-state-logic-into-a-reducer)的例子里面，状态被reducer所管理。reducer函数包含了所有的状态更新逻辑并在此文件的底部声明：
+在 [reducer 介绍](/learn/extracting-state-logic-into-a-reducer) 的例子里面，状态被 reducer 所管理。reducer 函数包含了所有的状态更新逻辑并在此文件的底部声明：
 
 <Sandpack>
 
 ```js App.js
-import {useReducer} from 'react';
-import AddTask from './AddTask.js';
-import TaskList from './TaskList.js';
+import { useReducer } from "react";
+import AddTask from "./AddTask.js";
+import TaskList from "./TaskList.js";
 
 export default function TaskBoard() {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   function handleAddTask(text) {
     dispatch({
-      type: 'added',
+      type: "added",
       id: nextId++,
       text: text,
     });
@@ -43,24 +40,22 @@ export default function TaskBoard() {
 
   function handleChangeTask(task) {
     dispatch({
-      type: 'changed',
-      task: task
+      type: "changed",
+      task: task,
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
-      type: 'deleted',
-      id: taskId
+      type: "deleted",
+      id: taskId,
     });
   }
 
   return (
     <>
       <h1>Day off in Kyoto</h1>
-      <AddTask
-        onAddTask={handleAddTask}
-      />
+      <AddTask onAddTask={handleAddTask} />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -72,15 +67,18 @@ export default function TaskBoard() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+    case "added": {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
-    case 'changed': {
-      return tasks.map(t => {
+    case "changed": {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -88,69 +86,64 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+    case "deleted": {
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
-      throw Error('Unknown action: ' + action.type);
+      throw Error("Unknown action: " + action.type);
     }
   }
 }
 
 let nextId = 3;
 const initialTasks = [
-  {id: 0, text: 'Philosopher’s Path', done: true},
-  {id: 1, text: 'Visit the temple', done: false},
-  {id: 2, text: 'Drink matcha', done: false}
+  { id: 0, text: "Philosopher’s Path", done: true },
+  { id: 1, text: "Visit the temple", done: false },
+  { id: 2, text: "Drink matcha", done: false },
 ];
 ```
 
 ```js AddTask.js
-import {useState} from 'react';
+import { useState } from "react";
 
-export default function AddTask({onAddTask}) {
-  const [text, setText] = useState('');
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState("");
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        onAddTask(text);
-      }}>Add
+      <button
+        onClick={() => {
+          setText("");
+          onAddTask(text);
+        }}
+      >
+        Add
       </button>
     </>
-  )
+  );
 }
 ```
 
 ```js TaskList.js
-import {useState} from 'react';
+import { useState } from "react";
 
-export default function TaskList({
-                                   tasks,
-                                   onChangeTask,
-                                   onDeleteTask
-                                 }) {
+export default function TaskList({ tasks, onChangeTask, onDeleteTask }) {
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task
-            task={task}
-            onChange={onChangeTask}
-            onDelete={onDeleteTask}
-          />
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({task, onChange, onDelete}) {
+function Task({ task, onChange, onDelete }) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -158,24 +151,21 @@ function Task({task, onChange, onDelete}) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             onChange({
               ...task,
-              text: e.target.value
+              text: e.target.value,
             });
-          }}/>
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -184,17 +174,15 @@ function Task({task, onChange, onDelete}) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           onChange({
             ...task,
-            done: e.target.checked
+            done: e.target.checked,
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>
-        Delete
-      </button>
+      <button onClick={() => onDelete(task.id)}>Delete</button>
     </label>
   );
 }
@@ -202,23 +190,21 @@ function Task({task, onChange, onDelete}) {
 
 ```css
 button {
-    margin: 5px;
+  margin: 5px;
 }
-
 li {
-    list-style-type: none;
+  list-style-type: none;
 }
-
-ul, li {
-    margin: 0;
-    padding: 0;
+ul,
+li {
+  margin: 0;
+  padding: 0;
 }
 ```
 
 </Sandpack>
 
-reducer 有助于事件处理程序简短明了。但随着应用越来越大，你有可能会遇到别的困难。**目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用** 若要让其他组件读取 `tasks`
-状态或对其进行更改，必须以 props 的形式显式[传递](/learn/passing-props-to-a-component)它。
+reducer 有助于事件处理程序简短明了。但随着应用越来越大，你有可能会遇到别的困难。 **目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用** 若要让其他组件读取 `tasks`状态或对其进行更改，必须以 props 的形式显式 [传递](/learn/passing-props-to-a-component) 它。
 
 例如，`TaskBoard` 将 `tasks` 和事件处理程序传递给 `TaskList`：
 
@@ -233,19 +219,14 @@ reducer 有助于事件处理程序简短明了。但随着应用越来越大，
 `TaskList` 将事件处理器传递给 `Task`：
 
 ```js
-<Task
-  task={task}
-  onChange={onChangeTask}
-  onDelete={onDeleteTask}
-/>
+<Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
 ```
 
 他能工作的非常好在诸如这样的小例子中，但是如果你有成千上百个组件时，传递所有状态和函数会让人非常烦恼！
 
 <!--(TODO: illustration of prop drilling)-->
 
-这就是为什么，比起通过 props 传递它们，你可能想把 `tasks` 状态和 `dispatch` 函数都 [放入 context](/learn/passing-data-deeply-with-context)。**
-这样，所有的在 `TaskBoard` 组件树之下的组件都不必一直往下传 props 而可以直接读取 tasks 和 dispatch 函数 **
+这就是为什么，比起通过 props 传递它们，你可能想把 `tasks` 状态和 `dispatch` 函数都 [放入 context](/learn/passing-data-deeply-with-context)。**这样，所有的在 `TaskBoard` 组件树之下的组件都不必一直往下传 props 而可以直接读取 tasks 和 dispatch 函数。**
 
 <!--(TODO: illustration of context)-->
 
@@ -255,7 +236,7 @@ reducer 有助于事件处理程序简短明了。但随着应用越来越大，
 2. 将 state 和 dispatch **放入** context。
 3. 在组件树的任何地方 **使用** context。
 
-### 第一步: 创建 context {/*step-1-create-the-context*/}
+### 第一步: 创建 context {/_step-1-create-the-context_/}
 
 `useReducer` 返回当前的 `tasks` 和 `dispatch` 函数来让你更新它们：
 
@@ -273,19 +254,16 @@ const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 <Sandpack>
 
 ```js App.js
-import {useReducer} from 'react';
-import AddTask from './AddTask.js';
-import TaskList from './TaskList.js';
+import { useReducer } from "react";
+import AddTask from "./AddTask.js";
+import TaskList from "./TaskList.js";
 
 export default function TaskBoard() {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   function handleAddTask(text) {
     dispatch({
-      type: 'added',
+      type: "added",
       id: nextId++,
       text: text,
     });
@@ -293,24 +271,22 @@ export default function TaskBoard() {
 
   function handleChangeTask(task) {
     dispatch({
-      type: 'changed',
-      task: task
+      type: "changed",
+      task: task,
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
-      type: 'deleted',
-      id: taskId
+      type: "deleted",
+      id: taskId,
     });
   }
 
   return (
     <>
       <h1>Day off in Kyoto</h1>
-      <AddTask
-        onAddTask={handleAddTask}
-      />
+      <AddTask onAddTask={handleAddTask} />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -322,15 +298,18 @@ export default function TaskBoard() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+    case "added": {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
-    case 'changed': {
-      return tasks.map(t => {
+    case "changed": {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -338,76 +317,71 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+    case "deleted": {
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
-      throw Error('Unknown action: ' + action.type);
+      throw Error("Unknown action: " + action.type);
     }
   }
 }
 
 let nextId = 3;
 const initialTasks = [
-  {id: 0, text: 'Philosopher’s Path', done: true},
-  {id: 1, text: 'Visit the temple', done: false},
-  {id: 2, text: 'Drink matcha', done: false}
+  { id: 0, text: "Philosopher’s Path", done: true },
+  { id: 1, text: "Visit the temple", done: false },
+  { id: 2, text: "Drink matcha", done: false },
 ];
 ```
 
 ```js TasksContext.js active
-import {createContext} from 'react';
+import { createContext } from "react";
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
 ```js AddTask.js
-import {useState} from 'react';
+import { useState } from "react";
 
-export default function AddTask({onAddTask}) {
-  const [text, setText] = useState('');
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState("");
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        onAddTask(text);
-      }}>Add
+      <button
+        onClick={() => {
+          setText("");
+          onAddTask(text);
+        }}
+      >
+        Add
       </button>
     </>
-  )
+  );
 }
 ```
 
 ```js TaskList.js
-import {useState} from 'react';
+import { useState } from "react";
 
-export default function TaskList({
-                                   tasks,
-                                   onChangeTask,
-                                   onDeleteTask
-                                 }) {
+export default function TaskList({ tasks, onChangeTask, onDeleteTask }) {
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task
-            task={task}
-            onChange={onChangeTask}
-            onDelete={onDeleteTask}
-          />
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({task, onChange, onDelete}) {
+function Task({ task, onChange, onDelete }) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -415,24 +389,21 @@ function Task({task, onChange, onDelete}) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             onChange({
               ...task,
-              text: e.target.value
+              text: e.target.value,
             });
-          }}/>
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -441,17 +412,15 @@ function Task({task, onChange, onDelete}) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           onChange({
             ...task,
-            done: e.target.checked
+            done: e.target.checked,
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>
-        Delete
-      </button>
+      <button onClick={() => onDelete(task.id)}>Delete</button>
     </label>
   );
 }
@@ -459,16 +428,15 @@ function Task({task, onChange, onDelete}) {
 
 ```css
 button {
-    margin: 5px;
+  margin: 5px;
 }
-
 li {
-    list-style-type: none;
+  list-style-type: none;
 }
-
-ul, li {
-    margin: 0;
-    padding: 0;
+ul,
+li {
+  margin: 0;
+  padding: 0;
 }
 ```
 
@@ -476,13 +444,12 @@ ul, li {
 
 在这里，您将 `null` 作为默认值传递给两个 context。实际值将由 `TaskBoard` 组件提供。
 
-### 第二步: 将 state 和 dispatch 函数 放入context {/*step-2-put-state-and-dispatch-into-context*/}
+### 第二步: 将 state 和 dispatch 函数 放入 context {/_step-2-put-state-and-dispatch-into-context_/}
 
-现在，您可以将所有的 context 导入 `TaskBoard` 组件。获取 `useReducer()` 返回的 `tasks` 和 `dispatch`
-并将它们[提供](/learn/passing-data-deeply-with-context#step-3-provide-the-context)给整个组件树：
+现在，您可以将所有的 context 导入 `TaskBoard` 组件。获取 `useReducer()` 返回的 `tasks` 和 `dispatch` 并将它们 [提供](/learn/passing-data-deeply-with-context#step-3-provide-the-context) 给整个组件树：
 
 ```js {4,7-8}
-import {TasksContext, TasksDispatchContext} from './TasksContext.js';
+import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
 
 export default function TaskBoard() {
   const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
@@ -502,20 +469,17 @@ export default function TaskBoard() {
 <Sandpack>
 
 ```js App.js
-import {useReducer} from 'react';
-import AddTask from './AddTask.js';
-import TaskList from './TaskList.js';
-import {TasksContext, TasksDispatchContext} from './TasksContext.js';
+import { useReducer } from "react";
+import AddTask from "./AddTask.js";
+import TaskList from "./TaskList.js";
+import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
 
 export default function TaskBoard() {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   function handleAddTask(text) {
     dispatch({
-      type: 'added',
+      type: "added",
       id: nextId++,
       text: text,
     });
@@ -523,15 +487,15 @@ export default function TaskBoard() {
 
   function handleChangeTask(task) {
     dispatch({
-      type: 'changed',
-      task: task
+      type: "changed",
+      task: task,
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
-      type: 'deleted',
-      id: taskId
+      type: "deleted",
+      id: taskId,
     });
   }
 
@@ -539,9 +503,7 @@ export default function TaskBoard() {
     <TasksContext.Provider value={tasks}>
       <TasksDispatchContext.Provider value={dispatch}>
         <h1>Day off in Kyoto</h1>
-        <AddTask
-          onAddTask={handleAddTask}
-        />
+        <AddTask onAddTask={handleAddTask} />
         <TaskList
           tasks={tasks}
           onChangeTask={handleChangeTask}
@@ -554,15 +516,18 @@ export default function TaskBoard() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+    case "added": {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
-    case 'changed': {
-      return tasks.map(t => {
+    case "changed": {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -570,76 +535,71 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+    case "deleted": {
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
-      throw Error('Unknown action: ' + action.type);
+      throw Error("Unknown action: " + action.type);
     }
   }
 }
 
 let nextId = 3;
 const initialTasks = [
-  {id: 0, text: 'Philosopher’s Path', done: true},
-  {id: 1, text: 'Visit the temple', done: false},
-  {id: 2, text: 'Drink matcha', done: false}
+  { id: 0, text: "Philosopher’s Path", done: true },
+  { id: 1, text: "Visit the temple", done: false },
+  { id: 2, text: "Drink matcha", done: false },
 ];
 ```
 
 ```js TasksContext.js
-import {createContext} from 'react';
+import { createContext } from "react";
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
 ```js AddTask.js
-import {useState} from 'react';
+import { useState } from "react";
 
-export default function AddTask({onAddTask}) {
-  const [text, setText] = useState('');
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState("");
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        onAddTask(text);
-      }}>Add
+      <button
+        onClick={() => {
+          setText("");
+          onAddTask(text);
+        }}
+      >
+        Add
       </button>
     </>
-  )
+  );
 }
 ```
 
 ```js TaskList.js
-import {useState} from 'react';
+import { useState } from "react";
 
-export default function TaskList({
-                                   tasks,
-                                   onChangeTask,
-                                   onDeleteTask
-                                 }) {
+export default function TaskList({ tasks, onChangeTask, onDeleteTask }) {
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task
-            task={task}
-            onChange={onChangeTask}
-            onDelete={onDeleteTask}
-          />
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({task, onChange, onDelete}) {
+function Task({ task, onChange, onDelete }) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -647,24 +607,21 @@ function Task({task, onChange, onDelete}) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             onChange({
               ...task,
-              text: e.target.value
+              text: e.target.value,
             });
-          }}/>
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -673,17 +630,15 @@ function Task({task, onChange, onDelete}) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           onChange({
             ...task,
-            done: e.target.checked
+            done: e.target.checked,
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>
-        Delete
-      </button>
+      <button onClick={() => onDelete(task.id)}>Delete</button>
     </label>
   );
 }
@@ -691,16 +646,15 @@ function Task({task, onChange, onDelete}) {
 
 ```css
 button {
-    margin: 5px;
+  margin: 5px;
 }
-
 li {
-    list-style-type: none;
+  list-style-type: none;
 }
-
-ul, li {
-    margin: 0;
-    padding: 0;
+ul,
+li {
+  margin: 0;
+  padding: 0;
 }
 ```
 
@@ -708,7 +662,7 @@ ul, li {
 
 在下一步中，你将删除通过 props 传递的代码。
 
-### Step 3: 在组件树中的任何地方使用 context {/*step-3-use-context-anywhere-in-the-tree*/}
+### Step 3: 在组件树中的任何地方使用 context {/_step-3-use-context-anywhere-in-the-tree_/}
 
 现在你不需要将 tasks 和事件处理程序在组件树中传递：
 
@@ -716,8 +670,8 @@ ul, li {
 <TasksContext.Provider value={tasks}>
   <TasksDispatchContext.Provider value={dispatch}>
     <h1>Day off in Kyoto</h1>
-    <AddTask/>
-    <TaskList/>
+    <AddTask />
+    <TaskList />
   </TasksDispatchContext.Provider>
 </TasksContext.Provider>
 ```
@@ -727,13 +681,13 @@ ul, li {
 ```js {2}
 export default function TaskList() {
   const tasks = useContext(TasksContext);
-// ...
+  // ...
 ```
 
 要更新任务列表，任何组件都可以从 context 中读取 `dispatch` 函数并调用它：
 
 ```js {3,9-13}
-export default function AddTask({onAddTask}) {
+export default function AddTask({ onAddTask }) {
   const [text, setText] = useState('');
   const dispatch = useContext(TasksDispatchContext);
   // ...
@@ -747,7 +701,7 @@ export default function AddTask({onAddTask}) {
         text: text,
       });
     }}>Add</button>
-// ...
+    // ...
 ```
 
 **`TaskBoard` 组件不会向下传递任何事件处理程序， `TaskList` 也不会。** 每个组件都会读取它需要的 context：
@@ -755,23 +709,20 @@ export default function AddTask({onAddTask}) {
 <Sandpack>
 
 ```js App.js
-import {useReducer} from 'react';
-import AddTask from './AddTask.js';
-import TaskList from './TaskList.js';
-import {TasksContext, TasksDispatchContext} from './TasksContext.js';
+import { useReducer } from "react";
+import AddTask from "./AddTask.js";
+import TaskList from "./TaskList.js";
+import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
 
 export default function TaskBoard() {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   return (
     <TasksContext.Provider value={tasks}>
       <TasksDispatchContext.Provider value={dispatch}>
         <h1>Day off in Kyoto</h1>
-        <AddTask/>
-        <TaskList/>
+        <AddTask />
+        <TaskList />
       </TasksDispatchContext.Provider>
     </TasksContext.Provider>
   );
@@ -779,15 +730,18 @@ export default function TaskBoard() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+    case "added": {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
-    case 'changed': {
-      return tasks.map(t => {
+    case "changed": {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -795,51 +749,54 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+    case "deleted": {
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
-      throw Error('Unknown action: ' + action.type);
+      throw Error("Unknown action: " + action.type);
     }
   }
 }
 
 const initialTasks = [
-  {id: 0, text: 'Philosopher’s Path', done: true},
-  {id: 1, text: 'Visit the temple', done: false},
-  {id: 2, text: 'Drink matcha', done: false}
+  { id: 0, text: "Philosopher’s Path", done: true },
+  { id: 1, text: "Visit the temple", done: false },
+  { id: 2, text: "Drink matcha", done: false },
 ];
 ```
 
 ```js TasksContext.js
-import {createContext} from 'react';
+import { createContext } from "react";
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
 ```js AddTask.js
-import {useState, useContext} from 'react';
-import {TasksDispatchContext} from './TasksContext.js';
+import { useState, useContext } from "react";
+import { TasksDispatchContext } from "./TasksContext.js";
 
-export default function AddTask({onAddTask}) {
-  const [text, setText] = useState('');
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState("");
   const dispatch = useContext(TasksDispatchContext);
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        dispatch({
-          type: 'added',
-          id: nextId++,
-          text: text,
-        });
-      }}>Add
+      <button
+        onClick={() => {
+          setText("");
+          dispatch({
+            type: "added",
+            id: nextId++,
+            text: text,
+          });
+        }}
+      >
+        Add
       </button>
     </>
   );
@@ -849,23 +806,23 @@ let nextId = 3;
 ```
 
 ```js TaskList.js active
-import {useState, useContext} from 'react';
-import {TasksContext, TasksDispatchContext} from './TasksContext.js';
+import { useState, useContext } from "react";
+import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
 
 export default function TaskList() {
   const tasks = useContext(TasksContext);
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task task={task}/>
+          <Task task={task} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({task}) {
+function Task({ task }) {
   const [isEditing, setIsEditing] = useState(false);
   const dispatch = useContext(TasksDispatchContext);
   let taskContent;
@@ -874,27 +831,24 @@ function Task({task}) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             dispatch({
-              type: 'changed',
+              type: "changed",
               task: {
                 ...task,
-                text: e.target.value
-              }
+                text: e.target.value,
+              },
             });
-          }}/>
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -903,23 +857,25 @@ function Task({task}) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
-            type: 'changed',
+            type: "changed",
             task: {
               ...task,
-              done: e.target.checked
-            }
+              done: e.target.checked,
+            },
           });
         }}
       />
       {taskContent}
-      <button onClick={() => {
-        dispatch({
-          type: 'deleted',
-          id: task.id
-        });
-      }}>
+      <button
+        onClick={() => {
+          dispatch({
+            type: "deleted",
+            id: task.id,
+          });
+        }}
+      >
         Delete
       </button>
     </label>
@@ -929,29 +885,28 @@ function Task({task}) {
 
 ```css
 button {
-    margin: 5px;
+  margin: 5px;
 }
-
 li {
-    list-style-type: none;
+  list-style-type: none;
 }
-
-ul, li {
-    margin: 0;
-    padding: 0;
+ul,
+li {
+  margin: 0;
+  padding: 0;
 }
 ```
 
 </Sandpack>
 
-**state 仍然"存在于"顶层"TaskBoard"组件中，由 `useReducer` 进行管理。** 不过，组件树里的组件只要导入这些 contexts 之后就可以获取 `tasks` 和 `dispatch`。
+**state 仍然"存在于"顶层 `TaskBoard` 组件中，由 `useReducer` 进行管理。** 不过，组件树里的组件只要导入这些 context 之后就可以获取 `tasks` 和 `dispatch`。
 
-## 将所有的连接部分放入一个文件 {/*moving-all-wiring-into-a-single-file*/}
+## 将所有的连接部分放入一个文件 {/_moving-all-wiring-into-a-single-file_/}
 
 虽然不是必要的，但你可以通过将 reducer 和 context 移动到单个文件中来进一步整理组件。目前，"TasksContext.js"仅包含两个 context 声明：
 
 ```js
-import {createContext} from 'react';
+import { createContext } from "react";
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
@@ -964,7 +919,7 @@ export const TasksDispatchContext = createContext(null);
 3. 它将 [把子元素作为 prop](/learn/passing-props-to-a-component#passing-jsx-as-children)，所以你可以传递 JSX。
 
 ```js
-export function TasksProvider({children}) {
+export function TasksProvider({ children }) {
   const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   return (
@@ -982,32 +937,29 @@ export function TasksProvider({children}) {
 <Sandpack>
 
 ```js App.js
-import AddTask from './AddTask.js';
-import TaskList from './TaskList.js';
-import {TasksProvider} from './TasksContext.js';
+import AddTask from "./AddTask.js";
+import TaskList from "./TaskList.js";
+import { TasksProvider } from "./TasksContext.js";
 
 export default function TaskBoard() {
   return (
     <TasksProvider>
       <h1>Day off in Kyoto</h1>
-      <AddTask/>
-      <TaskList/>
+      <AddTask />
+      <TaskList />
     </TasksProvider>
   );
 }
 ```
 
 ```js TasksContext.js
-import {createContext, useReducer} from 'react';
+import { createContext, useReducer } from "react";
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 
-export function TasksProvider({children}) {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+export function TasksProvider({ children }) {
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   return (
     <TasksContext.Provider value={tasks}>
@@ -1020,15 +972,18 @@ export function TasksProvider({children}) {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+    case "added": {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
-    case 'changed': {
-      return tasks.map(t => {
+    case "changed": {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -1036,44 +991,47 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+    case "deleted": {
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
-      throw Error('Unknown action: ' + action.type);
+      throw Error("Unknown action: " + action.type);
     }
   }
 }
 
 const initialTasks = [
-  {id: 0, text: 'Philosopher’s Path', done: true},
-  {id: 1, text: 'Visit the temple', done: false},
-  {id: 2, text: 'Drink matcha', done: false}
+  { id: 0, text: "Philosopher’s Path", done: true },
+  { id: 1, text: "Visit the temple", done: false },
+  { id: 2, text: "Drink matcha", done: false },
 ];
 ```
 
 ```js AddTask.js
-import {useState, useContext} from 'react';
-import {TasksDispatchContext} from './TasksContext.js';
+import { useState, useContext } from "react";
+import { TasksDispatchContext } from "./TasksContext.js";
 
-export default function AddTask({onAddTask}) {
-  const [text, setText] = useState('');
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState("");
   const dispatch = useContext(TasksDispatchContext);
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        dispatch({
-          type: 'added',
-          id: nextId++,
-          text: text,
-        });
-      }}>Add
+      <button
+        onClick={() => {
+          setText("");
+          dispatch({
+            type: "added",
+            id: nextId++,
+            text: text,
+          });
+        }}
+      >
+        Add
       </button>
     </>
   );
@@ -1083,23 +1041,23 @@ let nextId = 3;
 ```
 
 ```js TaskList.js
-import {useState, useContext} from 'react';
-import {TasksContext, TasksDispatchContext} from './TasksContext.js';
+import { useState, useContext } from "react";
+import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
 
 export default function TaskList() {
   const tasks = useContext(TasksContext);
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task task={task}/>
+          <Task task={task} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({task}) {
+function Task({ task }) {
   const [isEditing, setIsEditing] = useState(false);
   const dispatch = useContext(TasksDispatchContext);
   let taskContent;
@@ -1108,27 +1066,24 @@ function Task({task}) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             dispatch({
-              type: 'changed',
+              type: "changed",
               task: {
                 ...task,
-                text: e.target.value
-              }
+                text: e.target.value,
+              },
             });
-          }}/>
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -1137,23 +1092,25 @@ function Task({task}) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
-            type: 'changed',
+            type: "changed",
             task: {
               ...task,
-              done: e.target.checked
-            }
+              done: e.target.checked,
+            },
           });
         }}
       />
       {taskContent}
-      <button onClick={() => {
-        dispatch({
-          type: 'deleted',
-          id: task.id
-        });
-      }}>
+      <button
+        onClick={() => {
+          dispatch({
+            type: "deleted",
+            id: task.id,
+          });
+        }}
+      >
         Delete
       </button>
     </label>
@@ -1163,16 +1120,15 @@ function Task({task}) {
 
 ```css
 button {
-    margin: 5px;
+  margin: 5px;
 }
-
 li {
-    list-style-type: none;
+  list-style-type: none;
 }
-
-ul, li {
-    margin: 0;
-    padding: 0;
+ul,
+li {
+  margin: 0;
+  padding: 0;
 }
 ```
 
@@ -1197,39 +1153,35 @@ const tasks = useTasks();
 const dispatch = useTasksDispatch();
 ```
 
-这不会以任何方式改变行为，但它允许您稍后进一步分割这些 context 或向这些函数添加一些逻辑。**现在所有的 context 和 reducer 连接部分都在 `TasksContext.js`
-中。这保持了组件的干净和整洁，让我们专注于它们显示的内容，而不是它们从哪里获得数据：**
+这不会以任何方式改变行为，但它允许您稍后进一步分割这些 context 或向这些函数添加一些逻辑。**现在所有的 context 和 reducer 连接部分都在 `TasksContext.js`中。这保持了组件的干净和整洁，让我们专注于它们显示的内容，而不是它们从哪里获得数据：**
 
 <Sandpack>
 
 ```js App.js
-import AddTask from './AddTask.js';
-import TaskList from './TaskList.js';
-import {TasksProvider} from './TasksContext.js';
+import AddTask from "./AddTask.js";
+import TaskList from "./TaskList.js";
+import { TasksProvider } from "./TasksContext.js";
 
 export default function TaskBoard() {
   return (
     <TasksProvider>
       <h1>Day off in Kyoto</h1>
-      <AddTask/>
-      <TaskList/>
+      <AddTask />
+      <TaskList />
     </TasksProvider>
   );
 }
 ```
 
 ```js TasksContext.js
-import {createContext, useContext, useReducer} from 'react';
+import { createContext, useContext, useReducer } from "react";
 
 const TasksContext = createContext(null);
 
 const TasksDispatchContext = createContext(null);
 
-export function TasksProvider({children}) {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+export function TasksProvider({ children }) {
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   return (
     <TasksContext.Provider value={tasks}>
@@ -1250,15 +1202,18 @@ export function useTasksDispatch() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+    case "added": {
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
-    case 'changed': {
-      return tasks.map(t => {
+    case "changed": {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -1266,44 +1221,47 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+    case "deleted": {
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
-      throw Error('Unknown action: ' + action.type);
+      throw Error("Unknown action: " + action.type);
     }
   }
 }
 
 const initialTasks = [
-  {id: 0, text: 'Philosopher’s Path', done: true},
-  {id: 1, text: 'Visit the temple', done: false},
-  {id: 2, text: 'Drink matcha', done: false}
+  { id: 0, text: "Philosopher’s Path", done: true },
+  { id: 1, text: "Visit the temple", done: false },
+  { id: 2, text: "Drink matcha", done: false },
 ];
 ```
 
 ```js AddTask.js
-import {useState, useContext} from 'react';
-import {useTasksDispatch} from './TasksContext.js';
+import { useState, useContext } from "react";
+import { useTasksDispatch } from "./TasksContext.js";
 
-export default function AddTask({onAddTask}) {
-  const [text, setText] = useState('');
+export default function AddTask({ onAddTask }) {
+  const [text, setText] = useState("");
   const dispatch = useTasksDispatch();
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        dispatch({
-          type: 'added',
-          id: nextId++,
-          text: text,
-        });
-      }}>Add
+      <button
+        onClick={() => {
+          setText("");
+          dispatch({
+            type: "added",
+            id: nextId++,
+            text: text,
+          });
+        }}
+      >
+        Add
       </button>
     </>
   );
@@ -1313,23 +1271,23 @@ let nextId = 3;
 ```
 
 ```js TaskList.js active
-import {useState, useContext} from 'react';
-import {useTasks, useTasksDispatch} from './TasksContext.js';
+import { useState, useContext } from "react";
+import { useTasks, useTasksDispatch } from "./TasksContext.js";
 
 export default function TaskList() {
   const tasks = useTasks();
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task task={task}/>
+          <Task task={task} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({task}) {
+function Task({ task }) {
   const [isEditing, setIsEditing] = useState(false);
   const dispatch = useTasksDispatch();
   let taskContent;
@@ -1338,27 +1296,24 @@ function Task({task}) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             dispatch({
-              type: 'changed',
+              type: "changed",
               task: {
                 ...task,
-                text: e.target.value
-              }
+                text: e.target.value,
+              },
             });
-          }}/>
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -1367,23 +1322,25 @@ function Task({task}) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
-            type: 'changed',
+            type: "changed",
             task: {
               ...task,
-              done: e.target.checked
-            }
+              done: e.target.checked,
+            },
           });
         }}
       />
       {taskContent}
-      <button onClick={() => {
-        dispatch({
-          type: 'deleted',
-          id: task.id
-        });
-      }}>
+      <button
+        onClick={() => {
+          dispatch({
+            type: "deleted",
+            id: task.id,
+          });
+        }}
+      >
         Delete
       </button>
     </label>
@@ -1393,16 +1350,15 @@ function Task({task}) {
 
 ```css
 button {
-    margin: 5px;
+  margin: 5px;
 }
-
 li {
-    list-style-type: none;
+  list-style-type: none;
 }
-
-ul, li {
-    margin: 0;
-    padding: 0;
+ul,
+li {
+  margin: 0;
+  padding: 0;
 }
 ```
 
@@ -1410,10 +1366,9 @@ ul, li {
 
 你可能会想 `TasksProvider` 作为页面的一部分是如何处理 tasks 的，`useTasks` 用来读取它们，`useTasksDispatch` 用来从组件树下的任何组件更新它们。
 
-> 像 `useTasks` 和 `useTasksDispatch` 被称为 **[自定义钩子](/learn/reusing-logic-with-custom-hooks).** 如果你的函数名以 `use` 开头，它就被认为是一个自定义钩子。这让你可以使用其他hook，比如 `useContext`。
+> 像 `useTasks` 和 `useTasksDispatch` 被称为 **[自定义钩子](/learn/reusing-logic-with-custom-hooks).** 如果你的函数名以 `use` 开头，它就被认为是一个自定义钩子。这让你可以使用其他 Hook，比如 `useContext`。
 
-随着应用的增长，你可能会有许多这样的 context 和 reducer 的组合。这是一种强大的方法，可以拓展你的应用并 [提升状态] (/learn/sharing-state-between-components)
-，而无需在你想要访问组件树深处的数据时进行太多工作。
+随着应用的增长，你可能会有许多这样的 context 和 reducer 的组合。这是一种强大的方法，可以拓展你的应用并 [提升状态](/learn/sharing-state-between-components)，而无需在你想要访问组件树深处的数据时进行太多工作。
 
 <Recap>
 
@@ -1428,4 +1383,3 @@ ul, li {
 - 你可以在你的应用程序中大量配合使用 context 和 reducer。
 
 </Recap>
-

From 3d8dc6ca15cd53de935939ea38b9524361a6204c Mon Sep 17 00:00:00 2001
From: Ika <ngnl834@gmail.com>
Date: Mon, 20 Dec 2021 00:05:12 +0800
Subject: [PATCH 03/23] docs(cn): scaling-up-with-reducer-and-context

---
 .../scaling-up-with-reducer-and-context.md    | 831 +++++++++---------
 1 file changed, 406 insertions(+), 425 deletions(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 068fcaec87..5a51dbc883 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -10,29 +10,32 @@ Reducer 可以整合组件的状态更新逻辑。Context 可以将信息深入
 
 <YouWillLearn>
 
-- 如何结合使用 reducer 和 context
-- 如何去避免通过 props 传递 state 和 dispatch
-- 如何将 context 和状态逻辑保存在一个单独的文件中
+* 如何结合使用 reducer 和 context
+* 如何去避免通过 props 传递 state 和 dispatch
+* 如何将 context 和状态逻辑保存在一个单独的文件中
 
 </YouWillLearn>
 
-## 结合使用 reducer 和 context {/_combining-a-reducer-with-context_/}
+## 结合使用 reducer 和 context {/*combining-a-reducer-with-context*/}
 
 在 [reducer 介绍](/learn/extracting-state-logic-into-a-reducer) 的例子里面，状态被 reducer 所管理。reducer 函数包含了所有的状态更新逻辑并在此文件的底部声明：
 
 <Sandpack>
 
 ```js App.js
-import { useReducer } from "react";
-import AddTask from "./AddTask.js";
-import TaskList from "./TaskList.js";
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
 
 export default function TaskBoard() {
-  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
 
   function handleAddTask(text) {
     dispatch({
-      type: "added",
+      type: 'added',
       id: nextId++,
       text: text,
     });
@@ -40,22 +43,24 @@ export default function TaskBoard() {
 
   function handleChangeTask(task) {
     dispatch({
-      type: "changed",
-      task: task,
+      type: 'changed',
+      task: task
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
-      type: "deleted",
-      id: taskId,
+      type: 'deleted',
+      id: taskId
     });
   }
 
   return (
     <>
       <h1>Day off in Kyoto</h1>
-      <AddTask onAddTask={handleAddTask} />
+      <AddTask
+        onAddTask={handleAddTask}
+      />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -67,18 +72,15 @@ export default function TaskBoard() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case "added": {
-      return [
-        ...tasks,
-        {
-          id: action.id,
-          text: action.text,
-          done: false,
-        },
-      ];
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
     }
-    case "changed": {
-      return tasks.map((t) => {
+    case 'changed': {
+      return tasks.map(t => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -86,57 +88,61 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case "deleted": {
-      return tasks.filter((t) => t.id !== action.id);
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
     }
     default: {
-      throw Error("Unknown action: " + action.type);
+      throw Error('Unknown action: ' + action.type);
     }
   }
 }
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: "Philosopher’s Path", done: true },
-  { id: 1, text: "Visit the temple", done: false },
-  { id: 2, text: "Drink matcha", done: false },
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
 ];
 ```
 
 ```js AddTask.js
-import { useState } from "react";
+import { useState } from 'react';
 
 export default function AddTask({ onAddTask }) {
-  const [text, setText] = useState("");
+  const [text, setText] = useState('');
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={(e) => setText(e.target.value)}
+        onChange={e => setText(e.target.value)}
       />
-      <button
-        onClick={() => {
-          setText("");
-          onAddTask(text);
-        }}
-      >
-        Add
-      </button>
+      <button onClick={() => {
+        setText('');
+        onAddTask(text);
+      }}>Add</button>
     </>
-  );
+  )
 }
 ```
 
 ```js TaskList.js
-import { useState } from "react";
+import { useState } from 'react';
 
-export default function TaskList({ tasks, onChangeTask, onDeleteTask }) {
+export default function TaskList({
+  tasks,
+  onChangeTask,
+  onDeleteTask
+}) {
   return (
     <ul>
-      {tasks.map((task) => (
+      {tasks.map(task => (
         <li key={task.id}>
-          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
+          <Task
+            task={task}
+            onChange={onChangeTask}
+            onDelete={onDeleteTask}
+          />
         </li>
       ))}
     </ul>
@@ -151,21 +157,24 @@ function Task({ task, onChange, onDelete }) {
       <>
         <input
           value={task.text}
-          onChange={(e) => {
+          onChange={e => {
             onChange({
               ...task,
-              text: e.target.value,
+              text: e.target.value
             });
-          }}
-        />
-        <button onClick={() => setIsEditing(false)}>Save</button>
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>Edit</button>
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
       </>
     );
   }
@@ -174,32 +183,26 @@ function Task({ task, onChange, onDelete }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={(e) => {
+        onChange={e => {
           onChange({
             ...task,
-            done: e.target.checked,
+            done: e.target.checked
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>Delete</button>
+      <button onClick={() => onDelete(task.id)}>
+        Delete
+      </button>
     </label>
   );
 }
 ```
 
 ```css
-button {
-  margin: 5px;
-}
-li {
-  list-style-type: none;
-}
-ul,
-li {
-  margin: 0;
-  padding: 0;
-}
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
 ```
 
 </Sandpack>
@@ -219,7 +222,11 @@ reducer 有助于事件处理程序简短明了。但随着应用越来越大，
 `TaskList` 将事件处理器传递给 `Task`：
 
 ```js
-<Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
+<Task
+  task={task}
+  onChange={onChangeTask}
+  onDelete={onDeleteTask}
+/>
 ```
 
 他能工作的非常好在诸如这样的小例子中，但是如果你有成千上百个组件时，传递所有状态和函数会让人非常烦恼！
@@ -236,7 +243,7 @@ reducer 有助于事件处理程序简短明了。但随着应用越来越大，
 2. 将 state 和 dispatch **放入** context。
 3. 在组件树的任何地方 **使用** context。
 
-### 第一步: 创建 context {/_step-1-create-the-context_/}
+### 第一步: 创建 context {/*step-1-create-the-context*/}
 
 `useReducer` 返回当前的 `tasks` 和 `dispatch` 函数来让你更新它们：
 
@@ -254,16 +261,19 @@ const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 <Sandpack>
 
 ```js App.js
-import { useReducer } from "react";
-import AddTask from "./AddTask.js";
-import TaskList from "./TaskList.js";
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
 
 export default function TaskBoard() {
-  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
 
   function handleAddTask(text) {
     dispatch({
-      type: "added",
+      type: 'added',
       id: nextId++,
       text: text,
     });
@@ -271,22 +281,24 @@ export default function TaskBoard() {
 
   function handleChangeTask(task) {
     dispatch({
-      type: "changed",
-      task: task,
+      type: 'changed',
+      task: task
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
-      type: "deleted",
-      id: taskId,
+      type: 'deleted',
+      id: taskId
     });
   }
 
   return (
     <>
       <h1>Day off in Kyoto</h1>
-      <AddTask onAddTask={handleAddTask} />
+      <AddTask
+        onAddTask={handleAddTask}
+      />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -298,18 +310,15 @@ export default function TaskBoard() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case "added": {
-      return [
-        ...tasks,
-        {
-          id: action.id,
-          text: action.text,
-          done: false,
-        },
-      ];
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
     }
-    case "changed": {
-      return tasks.map((t) => {
+    case 'changed': {
+      return tasks.map(t => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -317,64 +326,68 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case "deleted": {
-      return tasks.filter((t) => t.id !== action.id);
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
     }
     default: {
-      throw Error("Unknown action: " + action.type);
+      throw Error('Unknown action: ' + action.type);
     }
   }
 }
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: "Philosopher’s Path", done: true },
-  { id: 1, text: "Visit the temple", done: false },
-  { id: 2, text: "Drink matcha", done: false },
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
 ];
 ```
 
 ```js TasksContext.js active
-import { createContext } from "react";
+import { createContext } from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
 ```js AddTask.js
-import { useState } from "react";
+import { useState } from 'react';
 
 export default function AddTask({ onAddTask }) {
-  const [text, setText] = useState("");
+  const [text, setText] = useState('');
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={(e) => setText(e.target.value)}
+        onChange={e => setText(e.target.value)}
       />
-      <button
-        onClick={() => {
-          setText("");
-          onAddTask(text);
-        }}
-      >
-        Add
-      </button>
+      <button onClick={() => {
+        setText('');
+        onAddTask(text);
+      }}>Add</button>
     </>
-  );
+  )
 }
 ```
 
 ```js TaskList.js
-import { useState } from "react";
+import { useState } from 'react';
 
-export default function TaskList({ tasks, onChangeTask, onDeleteTask }) {
+export default function TaskList({
+  tasks,
+  onChangeTask,
+  onDeleteTask
+}) {
   return (
     <ul>
-      {tasks.map((task) => (
+      {tasks.map(task => (
         <li key={task.id}>
-          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
+          <Task
+            task={task}
+            onChange={onChangeTask}
+            onDelete={onDeleteTask}
+          />
         </li>
       ))}
     </ul>
@@ -389,21 +402,24 @@ function Task({ task, onChange, onDelete }) {
       <>
         <input
           value={task.text}
-          onChange={(e) => {
+          onChange={e => {
             onChange({
               ...task,
-              text: e.target.value,
+              text: e.target.value
             });
-          }}
-        />
-        <button onClick={() => setIsEditing(false)}>Save</button>
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>Edit</button>
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
       </>
     );
   }
@@ -412,44 +428,38 @@ function Task({ task, onChange, onDelete }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={(e) => {
+        onChange={e => {
           onChange({
             ...task,
-            done: e.target.checked,
+            done: e.target.checked
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>Delete</button>
+      <button onClick={() => onDelete(task.id)}>
+        Delete
+      </button>
     </label>
   );
 }
 ```
 
 ```css
-button {
-  margin: 5px;
-}
-li {
-  list-style-type: none;
-}
-ul,
-li {
-  margin: 0;
-  padding: 0;
-}
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
 ```
 
 </Sandpack>
 
 在这里，您将 `null` 作为默认值传递给两个 context。实际值将由 `TaskBoard` 组件提供。
 
-### 第二步: 将 state 和 dispatch 函数 放入 context {/_step-2-put-state-and-dispatch-into-context_/}
+### 第二步: 将 state 和 dispatch 函数 放入 context {/*step-2-put-state-and-dispatch-into-context*/}
 
 现在，您可以将所有的 context 导入 `TaskBoard` 组件。获取 `useReducer()` 返回的 `tasks` 和 `dispatch` 并将它们 [提供](/learn/passing-data-deeply-with-context#step-3-provide-the-context) 给整个组件树：
 
 ```js {4,7-8}
-import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
 
 export default function TaskBoard() {
   const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
@@ -469,17 +479,20 @@ export default function TaskBoard() {
 <Sandpack>
 
 ```js App.js
-import { useReducer } from "react";
-import AddTask from "./AddTask.js";
-import TaskList from "./TaskList.js";
-import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
 
 export default function TaskBoard() {
-  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
 
   function handleAddTask(text) {
     dispatch({
-      type: "added",
+      type: 'added',
       id: nextId++,
       text: text,
     });
@@ -487,15 +500,15 @@ export default function TaskBoard() {
 
   function handleChangeTask(task) {
     dispatch({
-      type: "changed",
-      task: task,
+      type: 'changed',
+      task: task
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
-      type: "deleted",
-      id: taskId,
+      type: 'deleted',
+      id: taskId
     });
   }
 
@@ -503,7 +516,9 @@ export default function TaskBoard() {
     <TasksContext.Provider value={tasks}>
       <TasksDispatchContext.Provider value={dispatch}>
         <h1>Day off in Kyoto</h1>
-        <AddTask onAddTask={handleAddTask} />
+        <AddTask
+          onAddTask={handleAddTask}
+        />
         <TaskList
           tasks={tasks}
           onChangeTask={handleChangeTask}
@@ -516,18 +531,15 @@ export default function TaskBoard() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case "added": {
-      return [
-        ...tasks,
-        {
-          id: action.id,
-          text: action.text,
-          done: false,
-        },
-      ];
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
     }
-    case "changed": {
-      return tasks.map((t) => {
+    case 'changed': {
+      return tasks.map(t => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -535,64 +547,68 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case "deleted": {
-      return tasks.filter((t) => t.id !== action.id);
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
     }
     default: {
-      throw Error("Unknown action: " + action.type);
+      throw Error('Unknown action: ' + action.type);
     }
   }
 }
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: "Philosopher’s Path", done: true },
-  { id: 1, text: "Visit the temple", done: false },
-  { id: 2, text: "Drink matcha", done: false },
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
 ];
 ```
 
 ```js TasksContext.js
-import { createContext } from "react";
+import { createContext } from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
 ```js AddTask.js
-import { useState } from "react";
+import { useState } from 'react';
 
 export default function AddTask({ onAddTask }) {
-  const [text, setText] = useState("");
+  const [text, setText] = useState('');
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={(e) => setText(e.target.value)}
+        onChange={e => setText(e.target.value)}
       />
-      <button
-        onClick={() => {
-          setText("");
-          onAddTask(text);
-        }}
-      >
-        Add
-      </button>
+      <button onClick={() => {
+        setText('');
+        onAddTask(text);
+      }}>Add</button>
     </>
-  );
+  )
 }
 ```
 
 ```js TaskList.js
-import { useState } from "react";
+import { useState } from 'react';
 
-export default function TaskList({ tasks, onChangeTask, onDeleteTask }) {
+export default function TaskList({
+  tasks,
+  onChangeTask,
+  onDeleteTask
+}) {
   return (
     <ul>
-      {tasks.map((task) => (
+      {tasks.map(task => (
         <li key={task.id}>
-          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
+          <Task
+            task={task}
+            onChange={onChangeTask}
+            onDelete={onDeleteTask}
+          />
         </li>
       ))}
     </ul>
@@ -607,21 +623,24 @@ function Task({ task, onChange, onDelete }) {
       <>
         <input
           value={task.text}
-          onChange={(e) => {
+          onChange={e => {
             onChange({
               ...task,
-              text: e.target.value,
+              text: e.target.value
             });
-          }}
-        />
-        <button onClick={() => setIsEditing(false)}>Save</button>
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>Edit</button>
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
       </>
     );
   }
@@ -630,39 +649,33 @@ function Task({ task, onChange, onDelete }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={(e) => {
+        onChange={e => {
           onChange({
             ...task,
-            done: e.target.checked,
+            done: e.target.checked
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>Delete</button>
+      <button onClick={() => onDelete(task.id)}>
+        Delete
+      </button>
     </label>
   );
 }
 ```
 
 ```css
-button {
-  margin: 5px;
-}
-li {
-  list-style-type: none;
-}
-ul,
-li {
-  margin: 0;
-  padding: 0;
-}
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
 ```
 
 </Sandpack>
 
 在下一步中，你将删除通过 props 传递的代码。
 
-### Step 3: 在组件树中的任何地方使用 context {/_step-3-use-context-anywhere-in-the-tree_/}
+### Step 3: 在组件树中的任何地方使用 context {/*step-3-use-context-anywhere-in-the-tree*/}
 
 现在你不需要将 tasks 和事件处理程序在组件树中传递：
 
@@ -709,13 +722,16 @@ export default function AddTask({ onAddTask }) {
 <Sandpack>
 
 ```js App.js
-import { useReducer } from "react";
-import AddTask from "./AddTask.js";
-import TaskList from "./TaskList.js";
-import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
+import { useReducer } from 'react';
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
 
 export default function TaskBoard() {
-  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
 
   return (
     <TasksContext.Provider value={tasks}>
@@ -730,18 +746,15 @@ export default function TaskBoard() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case "added": {
-      return [
-        ...tasks,
-        {
-          id: action.id,
-          text: action.text,
-          done: false,
-        },
-      ];
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
     }
-    case "changed": {
-      return tasks.map((t) => {
+    case 'changed': {
+      return tasks.map(t => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -749,55 +762,51 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case "deleted": {
-      return tasks.filter((t) => t.id !== action.id);
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
     }
     default: {
-      throw Error("Unknown action: " + action.type);
+      throw Error('Unknown action: ' + action.type);
     }
   }
 }
 
 const initialTasks = [
-  { id: 0, text: "Philosopher’s Path", done: true },
-  { id: 1, text: "Visit the temple", done: false },
-  { id: 2, text: "Drink matcha", done: false },
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
 ];
 ```
 
 ```js TasksContext.js
-import { createContext } from "react";
+import { createContext } from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
 ```js AddTask.js
-import { useState, useContext } from "react";
-import { TasksDispatchContext } from "./TasksContext.js";
+import { useState, useContext } from 'react';
+import { TasksDispatchContext } from './TasksContext.js';
 
 export default function AddTask({ onAddTask }) {
-  const [text, setText] = useState("");
+  const [text, setText] = useState('');
   const dispatch = useContext(TasksDispatchContext);
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={(e) => setText(e.target.value)}
+        onChange={e => setText(e.target.value)}
       />
-      <button
-        onClick={() => {
-          setText("");
-          dispatch({
-            type: "added",
-            id: nextId++,
-            text: text,
-          });
-        }}
-      >
-        Add
-      </button>
+      <button onClick={() => {
+        setText('');
+        dispatch({
+          type: 'added',
+          id: nextId++,
+          text: text,
+        }); 
+      }}>Add</button>
     </>
   );
 }
@@ -806,14 +815,14 @@ let nextId = 3;
 ```
 
 ```js TaskList.js active
-import { useState, useContext } from "react";
-import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
+import { useState, useContext } from 'react';
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
 
 export default function TaskList() {
   const tasks = useContext(TasksContext);
   return (
     <ul>
-      {tasks.map((task) => (
+      {tasks.map(task => (
         <li key={task.id}>
           <Task task={task} />
         </li>
@@ -831,24 +840,27 @@ function Task({ task }) {
       <>
         <input
           value={task.text}
-          onChange={(e) => {
+          onChange={e => {
             dispatch({
-              type: "changed",
+              type: 'changed',
               task: {
                 ...task,
-                text: e.target.value,
-              },
+                text: e.target.value
+              }
             });
-          }}
-        />
-        <button onClick={() => setIsEditing(false)}>Save</button>
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>Edit</button>
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
       </>
     );
   }
@@ -857,25 +869,23 @@ function Task({ task }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={(e) => {
+        onChange={e => {
           dispatch({
-            type: "changed",
+            type: 'changed',
             task: {
               ...task,
-              done: e.target.checked,
-            },
+              done: e.target.checked
+            }
           });
         }}
       />
       {taskContent}
-      <button
-        onClick={() => {
-          dispatch({
-            type: "deleted",
-            id: task.id,
-          });
-        }}
-      >
+      <button onClick={() => {
+        dispatch({
+          type: 'deleted',
+          id: task.id
+        });
+      }}>
         Delete
       </button>
     </label>
@@ -884,29 +894,21 @@ function Task({ task }) {
 ```
 
 ```css
-button {
-  margin: 5px;
-}
-li {
-  list-style-type: none;
-}
-ul,
-li {
-  margin: 0;
-  padding: 0;
-}
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
 ```
 
 </Sandpack>
 
 **state 仍然"存在于"顶层 `TaskBoard` 组件中，由 `useReducer` 进行管理。** 不过，组件树里的组件只要导入这些 context 之后就可以获取 `tasks` 和 `dispatch`。
 
-## 将所有的连接部分放入一个文件 {/_moving-all-wiring-into-a-single-file_/}
+## 将所有的连接部分放入一个文件 {/*moving-all-wiring-into-a-single-file*/}
 
 虽然不是必要的，但你可以通过将 reducer 和 context 移动到单个文件中来进一步整理组件。目前，"TasksContext.js"仅包含两个 context 声明：
 
 ```js
-import { createContext } from "react";
+import { createContext } from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
@@ -937,9 +939,9 @@ export function TasksProvider({ children }) {
 <Sandpack>
 
 ```js App.js
-import AddTask from "./AddTask.js";
-import TaskList from "./TaskList.js";
-import { TasksProvider } from "./TasksContext.js";
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksProvider } from './TasksContext.js';
 
 export default function TaskBoard() {
   return (
@@ -953,13 +955,16 @@ export default function TaskBoard() {
 ```
 
 ```js TasksContext.js
-import { createContext, useReducer } from "react";
+import { createContext, useReducer } from 'react';
 
 export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 
 export function TasksProvider({ children }) {
-  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
 
   return (
     <TasksContext.Provider value={tasks}>
@@ -972,18 +977,15 @@ export function TasksProvider({ children }) {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case "added": {
-      return [
-        ...tasks,
-        {
-          id: action.id,
-          text: action.text,
-          done: false,
-        },
-      ];
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
     }
-    case "changed": {
-      return tasks.map((t) => {
+    case 'changed': {
+      return tasks.map(t => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -991,48 +993,44 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case "deleted": {
-      return tasks.filter((t) => t.id !== action.id);
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
     }
     default: {
-      throw Error("Unknown action: " + action.type);
+      throw Error('Unknown action: ' + action.type);
     }
   }
 }
 
 const initialTasks = [
-  { id: 0, text: "Philosopher’s Path", done: true },
-  { id: 1, text: "Visit the temple", done: false },
-  { id: 2, text: "Drink matcha", done: false },
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
 ];
 ```
 
 ```js AddTask.js
-import { useState, useContext } from "react";
-import { TasksDispatchContext } from "./TasksContext.js";
+import { useState, useContext } from 'react';
+import { TasksDispatchContext } from './TasksContext.js';
 
 export default function AddTask({ onAddTask }) {
-  const [text, setText] = useState("");
+  const [text, setText] = useState('');
   const dispatch = useContext(TasksDispatchContext);
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={(e) => setText(e.target.value)}
+        onChange={e => setText(e.target.value)}
       />
-      <button
-        onClick={() => {
-          setText("");
-          dispatch({
-            type: "added",
-            id: nextId++,
-            text: text,
-          });
-        }}
-      >
-        Add
-      </button>
+      <button onClick={() => {
+        setText('');
+        dispatch({
+          type: 'added',
+          id: nextId++,
+          text: text,
+        }); 
+      }}>Add</button>
     </>
   );
 }
@@ -1041,14 +1039,14 @@ let nextId = 3;
 ```
 
 ```js TaskList.js
-import { useState, useContext } from "react";
-import { TasksContext, TasksDispatchContext } from "./TasksContext.js";
+import { useState, useContext } from 'react';
+import { TasksContext, TasksDispatchContext } from './TasksContext.js';
 
 export default function TaskList() {
   const tasks = useContext(TasksContext);
   return (
     <ul>
-      {tasks.map((task) => (
+      {tasks.map(task => (
         <li key={task.id}>
           <Task task={task} />
         </li>
@@ -1066,24 +1064,27 @@ function Task({ task }) {
       <>
         <input
           value={task.text}
-          onChange={(e) => {
+          onChange={e => {
             dispatch({
-              type: "changed",
+              type: 'changed',
               task: {
                 ...task,
-                text: e.target.value,
-              },
+                text: e.target.value
+              }
             });
-          }}
-        />
-        <button onClick={() => setIsEditing(false)}>Save</button>
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>Edit</button>
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
       </>
     );
   }
@@ -1092,25 +1093,23 @@ function Task({ task }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={(e) => {
+        onChange={e => {
           dispatch({
-            type: "changed",
+            type: 'changed',
             task: {
               ...task,
-              done: e.target.checked,
-            },
+              done: e.target.checked
+            }
           });
         }}
       />
       {taskContent}
-      <button
-        onClick={() => {
-          dispatch({
-            type: "deleted",
-            id: task.id,
-          });
-        }}
-      >
+      <button onClick={() => {
+        dispatch({
+          type: 'deleted',
+          id: task.id
+        });
+      }}>
         Delete
       </button>
     </label>
@@ -1119,17 +1118,9 @@ function Task({ task }) {
 ```
 
 ```css
-button {
-  margin: 5px;
-}
-li {
-  list-style-type: none;
-}
-ul,
-li {
-  margin: 0;
-  padding: 0;
-}
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
 ```
 
 </Sandpack>
@@ -1158,9 +1149,9 @@ const dispatch = useTasksDispatch();
 <Sandpack>
 
 ```js App.js
-import AddTask from "./AddTask.js";
-import TaskList from "./TaskList.js";
-import { TasksProvider } from "./TasksContext.js";
+import AddTask from './AddTask.js';
+import TaskList from './TaskList.js';
+import { TasksProvider } from './TasksContext.js';
 
 export default function TaskBoard() {
   return (
@@ -1174,14 +1165,17 @@ export default function TaskBoard() {
 ```
 
 ```js TasksContext.js
-import { createContext, useContext, useReducer } from "react";
+import { createContext, useContext, useReducer } from 'react';
 
 const TasksContext = createContext(null);
 
 const TasksDispatchContext = createContext(null);
 
 export function TasksProvider({ children }) {
-  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+  const [tasks, dispatch] = useReducer(
+    tasksReducer,
+    initialTasks
+  );
 
   return (
     <TasksContext.Provider value={tasks}>
@@ -1202,18 +1196,15 @@ export function useTasksDispatch() {
 
 function tasksReducer(tasks, action) {
   switch (action.type) {
-    case "added": {
-      return [
-        ...tasks,
-        {
-          id: action.id,
-          text: action.text,
-          done: false,
-        },
-      ];
+    case 'added': {
+      return [...tasks, {
+        id: action.id,
+        text: action.text,
+        done: false
+      }];
     }
-    case "changed": {
-      return tasks.map((t) => {
+    case 'changed': {
+      return tasks.map(t => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -1221,48 +1212,44 @@ function tasksReducer(tasks, action) {
         }
       });
     }
-    case "deleted": {
-      return tasks.filter((t) => t.id !== action.id);
+    case 'deleted': {
+      return tasks.filter(t => t.id !== action.id);
     }
     default: {
-      throw Error("Unknown action: " + action.type);
+      throw Error('Unknown action: ' + action.type);
     }
   }
 }
 
 const initialTasks = [
-  { id: 0, text: "Philosopher’s Path", done: true },
-  { id: 1, text: "Visit the temple", done: false },
-  { id: 2, text: "Drink matcha", done: false },
+  { id: 0, text: 'Philosopher’s Path', done: true },
+  { id: 1, text: 'Visit the temple', done: false },
+  { id: 2, text: 'Drink matcha', done: false }
 ];
 ```
 
 ```js AddTask.js
-import { useState, useContext } from "react";
-import { useTasksDispatch } from "./TasksContext.js";
+import { useState, useContext } from 'react';
+import { useTasksDispatch } from './TasksContext.js';
 
 export default function AddTask({ onAddTask }) {
-  const [text, setText] = useState("");
+  const [text, setText] = useState('');
   const dispatch = useTasksDispatch();
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={(e) => setText(e.target.value)}
+        onChange={e => setText(e.target.value)}
       />
-      <button
-        onClick={() => {
-          setText("");
-          dispatch({
-            type: "added",
-            id: nextId++,
-            text: text,
-          });
-        }}
-      >
-        Add
-      </button>
+      <button onClick={() => {
+        setText('');
+        dispatch({
+          type: 'added',
+          id: nextId++,
+          text: text,
+        }); 
+      }}>Add</button>
     </>
   );
 }
@@ -1271,14 +1258,14 @@ let nextId = 3;
 ```
 
 ```js TaskList.js active
-import { useState, useContext } from "react";
-import { useTasks, useTasksDispatch } from "./TasksContext.js";
+import { useState, useContext } from 'react';
+import { useTasks, useTasksDispatch } from './TasksContext.js';
 
 export default function TaskList() {
   const tasks = useTasks();
   return (
     <ul>
-      {tasks.map((task) => (
+      {tasks.map(task => (
         <li key={task.id}>
           <Task task={task} />
         </li>
@@ -1296,24 +1283,27 @@ function Task({ task }) {
       <>
         <input
           value={task.text}
-          onChange={(e) => {
+          onChange={e => {
             dispatch({
-              type: "changed",
+              type: 'changed',
               task: {
                 ...task,
-                text: e.target.value,
-              },
+                text: e.target.value
+              }
             });
-          }}
-        />
-        <button onClick={() => setIsEditing(false)}>Save</button>
+          }} />
+        <button onClick={() => setIsEditing(false)}>
+          Save
+        </button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>Edit</button>
+        <button onClick={() => setIsEditing(true)}>
+          Edit
+        </button>
       </>
     );
   }
@@ -1322,25 +1312,23 @@ function Task({ task }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={(e) => {
+        onChange={e => {
           dispatch({
-            type: "changed",
+            type: 'changed',
             task: {
               ...task,
-              done: e.target.checked,
-            },
+              done: e.target.checked
+            }
           });
         }}
       />
       {taskContent}
-      <button
-        onClick={() => {
-          dispatch({
-            type: "deleted",
-            id: task.id,
-          });
-        }}
-      >
+      <button onClick={() => {
+        dispatch({
+          type: 'deleted',
+          id: task.id
+        });
+      }}>
         Delete
       </button>
     </label>
@@ -1349,17 +1337,9 @@ function Task({ task }) {
 ```
 
 ```css
-button {
-  margin: 5px;
-}
-li {
-  list-style-type: none;
-}
-ul,
-li {
-  margin: 0;
-  padding: 0;
-}
+button { margin: 5px; }
+li { list-style-type: none; }
+ul, li { margin: 0; padding: 0; }
 ```
 
 </Sandpack>
@@ -1374,12 +1354,13 @@ li {
 
 - 你可以将 reducer 与 context 相结合，让任何组件读取和更新它的状态。
 - 为子组件提供 state 和 dispatch 函数：
-    1. 创建两个 context (一个用于 state,一个用于 dispatch 函数)。
-    2. 让组件的 context 使用 reducer。
-    3. 使用组件中需要读取的 context。
+  1. 创建两个 context (一个用于 state,一个用于 dispatch 函数)。
+  2. 让组件的 context 使用 reducer。
+  3. 使用组件中需要读取的 context。
 - 你可以通过将所有传递信息的代码移动到单个文件中来进一步整理组件。
-    - 你可以导出一个像 `TasksProvider` 可以提供 context 的组件。
-    - 你也可以导出自定义钩子像 `useTasks` 和 `useTasksDispatch` 。
+  - 你可以导出一个像 `TasksProvider` 可以提供 context 的组件。
+  - 你也可以导出自定义钩子像 `useTasks` 和 `useTasksDispatch` 。
 - 你可以在你的应用程序中大量配合使用 context 和 reducer。
 
 </Recap>
+

From 776b4714bf46e133664855f531bc65221a6597c7 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 27 Dec 2021 13:00:47 +0800
Subject: [PATCH 04/23] Apply suggestions from code review

Co-authored-by: KnowsCount <knowscount@gmail.com>
Co-authored-by: yang <yyyanghj@gmail.com>
---
 .../scaling-up-with-reducer-and-context.md     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 5a51dbc883..349754b7fd 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -207,7 +207,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-reducer 有助于事件处理程序简短明了。但随着应用越来越大，你有可能会遇到别的困难。 **目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用** 若要让其他组件读取 `tasks`状态或对其进行更改，必须以 props 的形式显式 [传递](/learn/passing-props-to-a-component) 它。
+Reducer 有助于事件处理程序简短明了。但随着应用越来越规模庞大，你就可能会遇到别的困难。 **目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用。** 若要让其他组件读取 `tasks`状态或对其进行更改，必须以 props 的形式显式 [传递](/learn/passing-props-to-a-component) 它。
 
 例如，`TaskBoard` 将 `tasks` 和事件处理程序传递给 `TaskList`：
 
@@ -219,7 +219,7 @@ reducer 有助于事件处理程序简短明了。但随着应用越来越大，
 />
 ```
 
-`TaskList` 将事件处理器传递给 `Task`：
+`TaskList` 将事件处理程序传递给 `Task`：
 
 ```js
 <Task
@@ -229,7 +229,7 @@ reducer 有助于事件处理程序简短明了。但随着应用越来越大，
 />
 ```
 
-他能工作的非常好在诸如这样的小例子中，但是如果你有成千上百个组件时，传递所有状态和函数会让人非常烦恼！
+在这样的小例子里他可能问题不大，但是如果你有成千上百个组件时，传递所有状态和函数就会让你非常烦恼！
 
 <!--(TODO: illustration of prop drilling)-->
 
@@ -251,7 +251,7 @@ reducer 有助于事件处理程序简短明了。但随着应用越来越大，
 const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 ```
 
-为了将他们从组件树往下传，你将 [创建](/learn/passing-data-deeply-with-context#step-2-use-the-context) 两个不同的 context：
+为了将它们从组件树往下传，你将 [创建](/learn/passing-data-deeply-with-context#step-2-use-the-context) 两个不同的 context：
 
 - `TasksContext` 提供当前的 tasks 列表。
 - `TasksDispatchContext` 提供了一个函数可以让组件分发动作。
@@ -452,11 +452,11 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-在这里，您将 `null` 作为默认值传递给两个 context。实际值将由 `TaskBoard` 组件提供。
+在这里，你把 `null` 作为默认值传递给两个 context。实际值是由 `TaskBoard` 组件提供的。
 
 ### 第二步: 将 state 和 dispatch 函数 放入 context {/*step-2-put-state-and-dispatch-into-context*/}
 
-现在，您可以将所有的 context 导入 `TaskBoard` 组件。获取 `useReducer()` 返回的 `tasks` 和 `dispatch` 并将它们 [提供](/learn/passing-data-deeply-with-context#step-3-provide-the-context) 给整个组件树：
+现在，你可以将所有的 context 导入 `TaskBoard` 组件。获取 `useReducer()` 返回的 `tasks` 和 `dispatch` 并将它们 [提供](/learn/passing-data-deeply-with-context#step-3-provide-the-context) 给整个组件树：
 
 ```js {4,7-8}
 import { TasksContext, TasksDispatchContext } from './TasksContext.js';
@@ -474,7 +474,7 @@ export default function TaskBoard() {
 }
 ```
 
-现在，您可以同时通过 props 和 context 传递信息：
+现在，你可以同时通过 props 和 context 传递信息：
 
 <Sandpack>
 
@@ -1144,7 +1144,7 @@ const tasks = useTasks();
 const dispatch = useTasksDispatch();
 ```
 
-这不会以任何方式改变行为，但它允许您稍后进一步分割这些 context 或向这些函数添加一些逻辑。**现在所有的 context 和 reducer 连接部分都在 `TasksContext.js`中。这保持了组件的干净和整洁，让我们专注于它们显示的内容，而不是它们从哪里获得数据：**
+这不会改变任何行为，但它会允许你之后进一步分割这些 context 或向这些函数添加一些逻辑。**现在所有的 context 和 reducer 连接部分都在 `TasksContext.js` 中。这保持了组件的干净和整洁，让我们专注于它们显示的内容，而不是它们从哪里获得数据：**
 
 <Sandpack>
 
@@ -1359,7 +1359,7 @@ ul, li { margin: 0; padding: 0; }
   3. 使用组件中需要读取的 context。
 - 你可以通过将所有传递信息的代码移动到单个文件中来进一步整理组件。
   - 你可以导出一个像 `TasksProvider` 可以提供 context 的组件。
-  - 你也可以导出自定义钩子像 `useTasks` 和 `useTasksDispatch` 。
+  - 你也可以导出自定义钩子像 `useTasks` 和 `useTasksDispatch`。
 - 你可以在你的应用程序中大量配合使用 context 和 reducer。
 
 </Recap>

From beadfaa5c56f689daa0b9eec60bd464eed94c003 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 27 Dec 2021 13:03:52 +0800
Subject: [PATCH 05/23] Update scaling-up-with-reducer-and-context.md

---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 349754b7fd..03a611aa6c 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -207,7 +207,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Reducer 有助于事件处理程序简短明了。但随着应用越来越规模庞大，你就可能会遇到别的困难。 **目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用。** 若要让其他组件读取 `tasks`状态或对其进行更改，必须以 props 的形式显式 [传递](/learn/passing-props-to-a-component) 它。
+Reducer 有助于事件处理程序简短明了。但随着应用规模越来越庞大，你就可能会遇到别的困难。 **目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用。** 若要让其他组件读取 `tasks`状态或对其进行更改，必须以 props 的形式显式 [传递](/learn/passing-props-to-a-component) 它。
 
 例如，`TaskBoard` 将 `tasks` 和事件处理程序传递给 `TaskList`：
 

From 3494e853966c730f1623b06c44649b2cf5140c66 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:21:09 +0800
Subject: [PATCH 06/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 03a611aa6c..dff7878970 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -229,7 +229,7 @@ Reducer 有助于事件处理程序简短明了。但随着应用规模越来越
 />
 ```
 
-在这样的小例子里他可能问题不大，但是如果你有成千上百个组件时，传递所有状态和函数就会让你非常烦恼！
+在像这样的小示例里这样做没什么问题，但是如果你有成千上百个组件，传递所有状态和函数就会让你非常烦恼！
 
 <!--(TODO: illustration of prop drilling)-->
 

From d3d3d31ed4e0a120e701792b446f23eac520cdb9 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:21:39 +0800
Subject: [PATCH 07/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index dff7878970..67fa65423b 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -697,7 +697,7 @@ export default function TaskList() {
   // ...
 ```
 
-要更新任务列表，任何组件都可以从 context 中读取 `dispatch` 函数并调用它：
+任何组件都可以从 context 中读取 `dispatch` 函数并调用它，从而更新任务列表：
 
 ```js {3,9-13}
 export default function AddTask({ onAddTask }) {

From ba2b71b8902dea74db10eb29e7cec18b3a38dc80 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:21:51 +0800
Subject: [PATCH 08/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 67fa65423b..da6d7eed27 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -903,7 +903,7 @@ ul, li { margin: 0; padding: 0; }
 
 **state 仍然"存在于"顶层 `TaskBoard` 组件中，由 `useReducer` 进行管理。** 不过，组件树里的组件只要导入这些 context 之后就可以获取 `tasks` 和 `dispatch`。
 
-## 将所有的连接部分放入一个文件 {/*moving-all-wiring-into-a-single-file*/}
+## 将相关逻辑迁移到一个文件当中 {/*moving-all-wiring-into-a-single-file*/}
 
 虽然不是必要的，但你可以通过将 reducer 和 context 移动到单个文件中来进一步整理组件。目前，"TasksContext.js"仅包含两个 context 声明：
 

From c380ffb53e10e8c158debd7476822e78548ad603 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:23:24 +0800
Subject: [PATCH 09/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index da6d7eed27..38b98b5250 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -905,7 +905,7 @@ ul, li { margin: 0; padding: 0; }
 
 ## 将相关逻辑迁移到一个文件当中 {/*moving-all-wiring-into-a-single-file*/}
 
-虽然不是必要的，但你可以通过将 reducer 和 context 移动到单个文件中来进一步整理组件。目前，"TasksContext.js"仅包含两个 context 声明：
+这不是必须的，但你可以通过将 reducer 和 context 移动到单个文件中来进一步整理组件。目前，“TasksContext.js” 仅包含两个 context 声明：
 
 ```js
 import { createContext } from 'react';

From d9a222ef6f3527f809c1887515ff8dffdeb416d0 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:24:41 +0800
Subject: [PATCH 10/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 38b98b5250..0aed86eadf 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -918,7 +918,7 @@ export const TasksDispatchContext = createContext(null);
 
 1. 它将管理 reducer 的状态。
 2. 它将提供所有的 context 给组件树。
-3. 它将 [把子元素作为 prop](/learn/passing-props-to-a-component#passing-jsx-as-children)，所以你可以传递 JSX。
+3. 它将 [把 `children` 作为 prop](/learn/passing-props-to-a-component#passing-jsx-as-children)，所以你可以传递 JSX。
 
 ```js
 export function TasksProvider({ children }) {

From abb3957aa5ebd35adc448c61a33307fe90fc794d Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:25:18 +0800
Subject: [PATCH 11/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 0aed86eadf..ac36a101fd 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -1137,7 +1137,7 @@ export function useTasksDispatch() {
 }
 ```
 
-当一个组件需要读取 context，它可以通过以下函数实现：
+组件可以通过以下函数读取 context：
 
 ```js {5-7}
 const tasks = useTasks();

From dd78a37924e5628950501d38b44428f4a1fadce9 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:25:44 +0800
Subject: [PATCH 12/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index ac36a101fd..8b2d8e80c8 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -1348,7 +1348,7 @@ ul, li { margin: 0; padding: 0; }
 
 > 像 `useTasks` 和 `useTasksDispatch` 被称为 **[自定义钩子](/learn/reusing-logic-with-custom-hooks).** 如果你的函数名以 `use` 开头，它就被认为是一个自定义钩子。这让你可以使用其他 Hook，比如 `useContext`。
 
-随着应用的增长，你可能会有许多这样的 context 和 reducer 的组合。这是一种强大的方法，可以拓展你的应用并 [提升状态](/learn/sharing-state-between-components)，而无需在你想要访问组件树深处的数据时进行太多工作。
+随着应用的增长，你可能会有许多这样的 context 和 reducer 的组合。这是一种强大的拓展应用并 [提升状态](/learn/sharing-state-between-components) 的方式，让你在组件树深处访问数据时无需进行太多工作。
 
 <Recap>
 

From 21a8a437a5f19818ee5f4dbbff393a4cb9a50d4b Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:25:58 +0800
Subject: [PATCH 13/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: KnowsCount <knowscount@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 8b2d8e80c8..515f73c194 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -207,7 +207,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Reducer 有助于事件处理程序简短明了。但随着应用规模越来越庞大，你就可能会遇到别的困难。 **目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用。** 若要让其他组件读取 `tasks`状态或对其进行更改，必须以 props 的形式显式 [传递](/learn/passing-props-to-a-component) 它。
+Reducer 有助于保持事件处理程序的简短明了。但随着应用规模越来越庞大，你就可能会遇到别的困难。 **目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用。** 若要让其他组件读取 `tasks` 状态或对其进行更改，必须以 props 的形式显式 [传递](/learn/passing-props-to-a-component) 它。
 
 例如，`TaskBoard` 将 `tasks` 和事件处理程序传递给 `TaskList`：
 

From dfec3597d15f0ed02890a359e1cc2b29feecd7b8 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:26:07 +0800
Subject: [PATCH 14/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 515f73c194..d2a9a6cd02 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -1360,7 +1360,7 @@ ul, li { margin: 0; padding: 0; }
 - 你可以通过将所有传递信息的代码移动到单个文件中来进一步整理组件。
   - 你可以导出一个像 `TasksProvider` 可以提供 context 的组件。
   - 你也可以导出自定义钩子像 `useTasks` 和 `useTasksDispatch`。
-- 你可以在你的应用程序中大量配合使用 context 和 reducer。
+- 你可以在你的应用程序中大量使用 context 和 reducer 的组合。
 
 </Recap>
 

From 4345563f705b20185490f9210c4c8b49de3b9824 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:26:20 +0800
Subject: [PATCH 15/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index d2a9a6cd02..f17f4b9ac9 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -1359,7 +1359,7 @@ ul, li { margin: 0; padding: 0; }
   3. 使用组件中需要读取的 context。
 - 你可以通过将所有传递信息的代码移动到单个文件中来进一步整理组件。
   - 你可以导出一个像 `TasksProvider` 可以提供 context 的组件。
-  - 你也可以导出自定义钩子像 `useTasks` 和 `useTasksDispatch`。
+  - 你也可以导出像 `useTasks` 和 `useTasksDispatch` 这样的自定义 Hook。
 - 你可以在你的应用程序中大量使用 context 和 reducer 的组合。
 
 </Recap>

From e5c6c344536dd7dd7de7e9dba1e3b3cc1c144631 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:26:41 +0800
Subject: [PATCH 16/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index f17f4b9ac9..a3d61514fd 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -1344,7 +1344,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-你可能会想 `TasksProvider` 作为页面的一部分是如何处理 tasks 的，`useTasks` 用来读取它们，`useTasksDispatch` 用来从组件树下的任何组件更新它们。
+你可以将 `TasksProvider` 视为页面的一部分，它知道如何处理 tasks。`useTasks` 用来读取它们，`useTasksDispatch` 用来从组件树下的任何组件更新它们。
 
 > 像 `useTasks` 和 `useTasksDispatch` 被称为 **[自定义钩子](/learn/reusing-logic-with-custom-hooks).** 如果你的函数名以 `use` 开头，它就被认为是一个自定义钩子。这让你可以使用其他 Hook，比如 `useContext`。
 

From 2dcef4ec811ae3167212d674c9b2d5014b67c601 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 3 Jan 2022 20:26:51 +0800
Subject: [PATCH 17/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: yang <yyyanghj@gmail.com>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index a3d61514fd..0611cfc1cb 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -1346,7 +1346,7 @@ ul, li { margin: 0; padding: 0; }
 
 你可以将 `TasksProvider` 视为页面的一部分，它知道如何处理 tasks。`useTasks` 用来读取它们，`useTasksDispatch` 用来从组件树下的任何组件更新它们。
 
-> 像 `useTasks` 和 `useTasksDispatch` 被称为 **[自定义钩子](/learn/reusing-logic-with-custom-hooks).** 如果你的函数名以 `use` 开头，它就被认为是一个自定义钩子。这让你可以使用其他 Hook，比如 `useContext`。
+> 像 `useTasks` 和 `useTasksDispatch` 这样的函数被称为 **[自定义 Hook](/learn/reusing-logic-with-custom-hooks)。** 如果你的函数名以 `use` 开头，它就被认为是一个自定义 Hook。这让你可以使用其他 Hook，比如 `useContext`。
 
 随着应用的增长，你可能会有许多这样的 context 和 reducer 的组合。这是一种强大的拓展应用并 [提升状态](/learn/sharing-state-between-components) 的方式，让你在组件树深处访问数据时无需进行太多工作。
 

From ad99d4b61f2485baeb66d367226875592936dde1 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Wed, 5 Jan 2022 15:19:29 +0800
Subject: [PATCH 18/23] Update scaling-up-with-reducer-and-context.md

---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 0611cfc1cb..82ccfec450 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -914,10 +914,10 @@ export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
-这个文件即将变得臃肿！你将会把 reducer 移动到同一文件中。然后，你将在这个文件中声明一个新的 `TasksProvider` 组件。此组件将所有部分连接在一起：
+来给这个文件添加更多代码！将 reducer 移动到此文件中，然后声明一个新的 `TasksProvider` 组件。此组件将所有部分连接在一起：
 
 1. 它将管理 reducer 的状态。
-2. 它将提供所有的 context 给组件树。
+2. 它将提供现有的 context 给组件树。
 3. 它将 [把 `children` 作为 prop](/learn/passing-props-to-a-component#passing-jsx-as-children)，所以你可以传递 JSX。
 
 ```js
@@ -934,7 +934,7 @@ export function TasksProvider({ children }) {
 }
 ```
 
-**这将从你的 `TaskBoard` 组件中移除所有错综复杂的东西：**
+**这将使 TaskBoard 组件更加直观：**
 
 <Sandpack>
 

From 6b5d8413930c737cd9e51c03eaea192770237b4b Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Mon, 7 Feb 2022 23:17:47 +0800
Subject: [PATCH 19/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

Co-authored-by: Tina Pu <t2pu@uwaterloo.ca>
---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 82ccfec450..2ea58a00d1 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -229,7 +229,7 @@ Reducer 有助于保持事件处理程序的简短明了。但随着应用规模
 />
 ```
 
-在像这样的小示例里这样做没什么问题，但是如果你有成千上百个组件，传递所有状态和函数就会让你非常烦恼！
+在像这样的小示例里这样做没什么问题，但是如果你有成千上百个组件，传递所有状态和函数可能会非常麻烦！
 
 <!--(TODO: illustration of prop drilling)-->
 

From 0a3281cda25f667786e866927a181fd13e89543c Mon Sep 17 00:00:00 2001
From: KnowsCount <knowscount@gmail.com>
Date: Tue, 8 Feb 2022 10:04:11 +0800
Subject: [PATCH 20/23] Apply suggestions from code review

---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 2ea58a00d1..0d6a24cf29 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -207,7 +207,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Reducer 有助于保持事件处理程序的简短明了。但随着应用规模越来越庞大，你就可能会遇到别的困难。 **目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用。** 若要让其他组件读取 `tasks` 状态或对其进行更改，必须以 props 的形式显式 [传递](/learn/passing-props-to-a-component) 它。
+Reducer 有助于保持事件处理程序的简短明了。但随着应用规模越来越庞大，你就可能会遇到别的困难。**目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskBoard` 组件中可用**。若要让其他组件读取 `tasks` 状态或对其进行更改，必须以 props 的形式显式 [传递](/learn/passing-props-to-a-component) 它。
 
 例如，`TaskBoard` 将 `tasks` 和事件处理程序传递给 `TaskList`：
 
@@ -233,7 +233,7 @@ Reducer 有助于保持事件处理程序的简短明了。但随着应用规模
 
 <!--(TODO: illustration of prop drilling)-->
 
-这就是为什么，比起通过 props 传递它们，你可能想把 `tasks` 状态和 `dispatch` 函数都 [放入 context](/learn/passing-data-deeply-with-context)。**这样，所有的在 `TaskBoard` 组件树之下的组件都不必一直往下传 props 而可以直接读取 tasks 和 dispatch 函数。**
+这就是为什么，比起通过 props 传递它们，你可能想把 `tasks` 状态和 `dispatch` 函数都 [放入 context](/learn/passing-data-deeply-with-context)。**这样，所有的在 `TaskBoard` 组件树之下的组件都不必一直往下传 props 而可以直接读取 tasks 和 dispatch 函数**。
 
 <!--(TODO: illustration of context)-->
 
@@ -901,7 +901,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-**state 仍然"存在于"顶层 `TaskBoard` 组件中，由 `useReducer` 进行管理。** 不过，组件树里的组件只要导入这些 context 之后就可以获取 `tasks` 和 `dispatch`。
+**state 仍然 “存在于” 顶层 `TaskBoard` 组件中，由 `useReducer` 进行管理**。不过，组件树里的组件只要导入这些 context 之后就可以获取 `tasks` 和 `dispatch`。
 
 ## 将相关逻辑迁移到一个文件当中 {/*moving-all-wiring-into-a-single-file*/}
 

From 3e2c27e7f212115eeab08502c4d3bbd001e9d5e7 Mon Sep 17 00:00:00 2001
From: KnowsCount <knowscount@gmail.com>
Date: Sun, 13 Feb 2022 11:19:39 +0800
Subject: [PATCH 21/23] Fix some spacing issues

---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index fddb987555..e6039ed634 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -207,7 +207,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Reducer 有助于保持事件处理程序的简短明了。但随着应用规模越来越庞大，你就可能会遇到别的困难。**目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskApp` 组件中可用。** 要让其他组件读取任务列表或更改它，你必须显式 [传递](/learn/passing-props-to-a-component) 当前状态和将其更改为 props 的事件处理程序。
+Reducer 有助于保持事件处理程序的简短明了。但随着应用规模越来越庞大，你就可能会遇到别的困难。**目前，`tasks` 状态和 `dispatch` 函数仅在顶级 `TaskApp` 组件中可用**。要让其他组件读取任务列表或更改它，你必须显式 [传递](/learn/passing-props-to-a-component) 当前状态和将其更改为 props 的事件处理程序。
 
 例如，`TaskApp` 将 一系列 task 和事件处理程序传递给 `TaskList`：
 For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`:
@@ -718,7 +718,7 @@ export default function AddTask({ onAddTask }) {
     // ...
 ```
 
-**`TaskApp` 组件不会向下传递任何事件处理程序， `TaskList` 也不会。** 每个组件都会读取它需要的 context：
+**`TaskApp` 组件不会向下传递任何事件处理程序，`TaskList` 也不会**。每个组件都会读取它需要的 context：
 
 <Sandpack>
 

From 2b1cc19eacefc063fcfcac3eca770b035f222436 Mon Sep 17 00:00:00 2001
From: Ikaite <42028215+Ikaite@users.noreply.github.com>
Date: Sun, 20 Feb 2022 16:08:14 +0800
Subject: [PATCH 22/23] Update scaling-up-with-reducer-and-context.md

---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index e6039ed634..7757219bbc 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -1,5 +1,10 @@
 ---
 title: 使用 Reducer 和 Context 来拓展你的应用
+translator: 
+  - Ikaite 
+  - KnowsCount 
+  - TinaaaaP 
+  - yyyang1996
 ---
 
 <Intro>

From 411eed89745eedde62d2bdd2fb6d388f062c58b0 Mon Sep 17 00:00:00 2001
From: QiChang Li <github@liqichang.com>
Date: Mon, 21 Feb 2022 22:02:04 +0800
Subject: [PATCH 23/23] Update
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md

---
 beta/src/pages/learn/scaling-up-with-reducer-and-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
index 7757219bbc..228dcfaaba 100644
--- a/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
+++ b/beta/src/pages/learn/scaling-up-with-reducer-and-context.md
@@ -1,6 +1,6 @@
 ---
 title: 使用 Reducer 和 Context 来拓展你的应用
-translator: 
+translators: 
   - Ikaite 
   - KnowsCount 
   - TinaaaaP