diff --git a/03-front-end-libraries/redux.json b/03-front-end-libraries/redux.json index 831f8c1..c741a2c 100644 --- a/03-front-end-libraries/redux.json +++ b/03-front-end-libraries/redux.json @@ -17,13 +17,13 @@ "title": "Create a Redux Store", "releasedOn": "December 25, 2017", "description": [ - "Redux is a state management framework that can be used with a number of different web technologies, including React.", - "In Redux, there is a single state object that's responsible for the entire state of your application. This means if you had a React app with ten components, and each component had its own local state, the entire state of your app would be defined by a single state object housed in the Redux store. This is the first important principle to understand when learning Redux: the Redux store is the single source of truth when it comes to application state.", - "This also means that any time any piece of your app wants to update state, it must do so through the Redux store. The unidirectional data flow makes it easier to track state management in your app.", - "
", - "The Redux store is an object which holds and manages application state. There is a method called createStore() on the Redux object, which you use to create the Redux store. This method takes a reducer function as a required argument. The reducer function is covered in a later challenge, and is already defined for you in the code editor. It simply takes state as an argument and returns state.", - "Declare a store variable and assign it to the createStore() method, passing in the reducer as an argument.", - "Note: The code in the editor uses ES6 default argument syntax to initialize this state to hold a value of 5. If you're not familiar with default arguments, you can refer to the ES6 section in the Beta Curriculum which covers this topic." + " Redux 是一个状态管理框架，可以与包括 React 在内的许多不同的 Web 技术一起使用。", + " 在 Redux 中，有一个状态对象负责应用程序的整个状态， 这意味着如果你有一个包含十个组件且每个组件都有自己的本地状态的 React 项目，那么这个项目的整个状态将通过 Redux store 被定义为单个状态对象， 这是学习 Redux 时要理解的第一个重要原则：Redux 存储是应用程序状态的唯一真实来源。", + " 这也意味着，如果你的应用程序想要更新状态，只能通过 Redux store 执行，单向数据流可以更轻松地对应用程序中的状态进行监测管理。", + + " Redux store 是一个保存和管理应用程序状态的 state，你可以使用Redux对象中的 createStore() 来创建一个 redux store，此方法将 reducer 函数作为必需参数，reducer 函数将在后面的挑战中介绍,该函数已在代码编辑器中为您定义，它只需将 state 作为参数并返回一个 state 即可。", + " 声明一个 store 变量并把它分配给 createStore() 方法，然后把 reducer 作为一个参数传入即可。", + " 注意: 编辑器中的代码使用ES6默认参数语法初始化 state 以保存 5 的值， 如果你不熟悉默认参数，你可以参考ES6全部课程，它里面涵盖了这个内容。" ], "files": { "indexjsx": { @@ -35,9 +35,9 @@ " return state;", "}", "", - "// Redux methods are available from a Redux object", - "// For example: Redux.createStore()", - "// Define the store here:", + "// Redux 方法可以从 Redux 对象获得", + "// 例如: Redux.createStore()", + "// 在这里定义一个 store :", "", "" ], @@ -47,16 +47,16 @@ }, "tests": [ { - "text": "The redux store exists.", - "testString": "assert(typeof store.getState === 'function', 'The redux store exists.');" + "text": "redux store 已经存在", + "testString": "assert(typeof store.getState === 'function', 'redux store 已经存在');" }, { - "text": "The redux store has a value of 5 for the state.", - "testString": "assert(store.getState()=== 5, 'The redux store has a value of 5 for the state.');" + "text": "redux store 的 state 的值为 5", + "testString": "assert(store.getState()=== 5, 'redux store 的 state 的值为 5');" } ], "solutions": [ - "const reducer = (state = 5) => {\n return state;\n}\n\n// Redux methods are available from a Redux object\n// For example: Redux.createStore()\n// Define the store here:\n\nconst store = Redux.createStore(reducer);" + "const reducer = (state = 5) => {\n return state;\n}\n\n// Redux 方法可以从 Redux 对象获得\n// 例如: Redux.createStore()\n// 在这里定义一个 store:\n\nconst store = Redux.createStore(reducer);" ], "challengeType": 6, "isRequired": false, @@ -67,9 +67,8 @@ "title": "Get State from the Redux Store", "releasedOn": "December 25, 2017", "description": [ - "The Redux store object provides several methods that allow you to interact with it. For example, you can retrieve the current state held in the Redux store object with the getState() method.", - "
", - "The code from the previous challenge is re-written more concisely in the code editor. Use store.getState() to retrieve the state from the store, and assign this to a new variable currentState." + " Redux存储对象提供了几种允许您与之交互的方法，您可以使用 getState() 方法检索 Redux 存储对象中保存的当前的 state 。", + " 在代码编辑器中可以将上一个挑战中的代码更简洁地重写， 在 store 中使用 store.getState() 检索 state ，并将其分配给新变量 currentState 。" ], "files": { "indexjsx": { @@ -81,7 +80,7 @@ " (state = 5) => state", ");", "", - "// change code below this line", + "// 更改此行下方的代码。", "" ], "head": [], @@ -90,16 +89,16 @@ }, "tests": [ { - "text": "The redux store should have a value of 5 for the initial state.", - "testString": "assert(store.getState()===5, 'The redux store should have a value of 5 for the initial state.');" + "text": " redux store 的 state 应该有一个初始值 5 。", + "testString": "assert(store.getState()===5, ' redux store 的 state 应该有一个初始值 5 。');" }, { - "text": "A variable currentState should exist and should be assigned the current state of the Redux store.", - "testString": "getUserInput => assert(currentState === 5 && getUserInput('index').includes('store.getState()'), 'A variable currentState should exist and should be assigned the current state of the Redux store.');" + "text": " 应该存在一个变量 currentState ，并为其分配 Redux store 的当前状态。", + "testString": "getUserInput => assert(currentState === 5 && getUserInput('index').includes('store.getState()'), ' 应该存在一个变量 currentState ，并为其分配 Redux store 的当前状态。');" } ], "solutions": [ - "const store = Redux.createStore(\n (state = 5) => state\n);\n\n// change code below this line\nconst currentState = store.getState();" + "const store = Redux.createStore(\n (state = 5) => state\n);\n\n// 更改此行下方的代码\nconst currentState = store.getState();" ], "challengeType": 6, "isRequired": false, @@ -110,10 +109,10 @@ "title": "Define a Redux Action", "releasedOn": "December 25, 2017", "description": [ - "Since Redux is a state management framework, updating state is one of its core tasks. In Redux, all state updates are triggered by dispatching actions. An action is simply a JavaScript object that contains information about an action event that has occurred. The Redux store receives these action objects, then updates its state accordingly. Sometimes a Redux action also carries some data. For example, the action carries a username after a user logs in. While the data is optional, actions must carry a type property that specifies the 'type' of action that occurred.", - "Think of Redux actions as messengers that deliver information about events happening in your app to the Redux store. The store then conducts the business of updating state based on the action that occurred.", - "
", - "Writing a Redux action is as simple as declaring an object with a type property. Declare an object action and give it a property type set to the string 'LOGIN'." + " 由于 Redux 是一个状态管理框架，因此更新状态是其核心任务之一。 在 Redux 中，所有状态更新都由分发操作触发，操作只是一个JavaScript对象，其中包含有关已发生的操作事件的信息， Redux 存储接收这些操作对象，然后相应地更新其状态。有时， Redux 操作也会携带一些数据，例如，在用户登录后携带用户名，虽然数据是可选的，但操作必须带有 type 属性，该属性指定发生操作的“类型”。", + " 我们可以将 Redux 操作视为信使，将有关应用程序中发生的事件信息提供给 Redux store ，然后store根据发生的操作进行状态的更新。", + + " 编写 Redux 操作就像声明具有 type 属性的对象一样简单，声明一个对象 action 并为它设置一个属性 type，并将他的值设置成字符串 'LOGIN'。" ], "files": { "indexjsx": { @@ -121,7 +120,7 @@ "ext": "jsx", "name": "index", "contents": [ - "// Define an action here:", + "// 在此处定义操作:", "" ], "head": [], @@ -130,12 +129,12 @@ }, "tests": [ { - "text": "An action object should exist.", - "testString": "assert((function() { return typeof action === 'object' })(), 'An action object should exist.');" + "text": " 应该有一个操作对象 ", + "testString": "assert((function() { return typeof action === 'object' })(), ' 应该有一个操作对象 ');" }, { - "text": "The action should have a key property type with value LOGIN.", - "testString": "assert((function() { return action.type === 'LOGIN' })(), 'The action should have a key property type with value LOGIN.');" + "text": " 该操作应具有值为 LOGIN 的键值类型。", + "testString": "assert((function() { return action.type === 'LOGIN' })(), '该操作应具有值为 LOGIN 的键值类型。');" } ], "solutions": [ @@ -150,9 +149,9 @@ "title": "Define an Action Creator", "releasedOn": "December 25, 2017", "description": [ - "After creating an action, the next step is sending the action to the Redux store so it can update its state. In Redux, you define action creators to accomplish this. An action creator is simply a JavaScript function that returns an action. In other words, action creators create objects that represent action events.", - "
", - "Define a function named actionCreator() that returns the action object when called." + " 创建操作后要将操作发送到 Redux store，以便它可以更新其状态。在 Redux 中，您可以定义动作创建器来完成此任务，动作创建者只是一个返回动作的 JavaScript 函数，换句话说，动作创建者创建表示动作事件的对象。", + + " 定义名为 actionCreator() 的函数，该函数在调用时返回 action 对象。" ], "files": { "indexjsx": { @@ -163,7 +162,7 @@ "const action = {", " type: 'LOGIN'", "}", - "// Define an action creator here:", + "// 在此处定义动作创建者：", "" ], "head": [], @@ -172,20 +171,20 @@ }, "tests": [ { - "text": "The function actionCreator should exist.", - "testString": "assert(typeof actionCreator === 'function', 'The function actionCreator should exist.');" + "text": " 函数 actionCreator 应该存在。", + "testString": "assert(typeof actionCreator === 'function', ' 函数 actionCreator 应该存在。" }, { - "text": "Running the actionCreator function should return the action object.", - "testString": "assert(typeof action === 'object', 'Running the actionCreator function should return the action object.');" + "text": " 运行 actionCreator 函数应返回操作对象。", + "testString": "assert(typeof action === 'object', ' 运行 actionCreator 函数应返回操作对象。');" }, { - "text": "The returned action should have a key property type with value LOGIN.", - "testString": "assert(action.type === 'LOGIN', 'The returned action should have a key property type with value LOGIN.');" + "text": " 返回的操作应具有值为 LOGIN 的键值类型。", + "testString": "assert(action.type === 'LOGIN', '返回的操作应具有值为 LOGIN 的键值类型。');" } ], "solutions": [ - "const action = {\n type: 'LOGIN'\n}\n// Define an action creator here:\nconst actionCreator = () => {\n return action;\n};" + "const action = {\n type: 'LOGIN'\n}\n// 在此处定义动作创建者:\nconst actionCreator = () => {\n return action;\n};" ], "challengeType": 6, "isRequired": false, @@ -196,11 +195,11 @@ "title": "Dispatch an Action Event", "releasedOn": "December 25, 2017", "description": [ - "dispatch method is what you use to dispatch actions to the Redux store. Calling store.dispatch() and passing the value returned from an action creator sends an action back to the store.", - "Recall that action creators return an object with a type property that specifies the action that has occurred. Then the method dispatches an action object to the Redux store. Based on the previous challenge's example, the following lines are equivalent, and both dispatch the action of type LOGIN:", - "
store.dispatch(actionCreator());
store.dispatch({ type: 'LOGIN' });
", - "
", - "The Redux store in the code editor has an initialized state that's an object containing a login property currently set to false. There's also an action creator called loginAction() which returns an action of type LOGIN. Dispatch the LOGIN action to the Redux store by calling the dispatch method, and pass in the action created by loginAction()." + " dispatch 方法用于将操作分派给 Redux store，调用 store.dispatch() 并将从操作创建者返回的值发送回 store 。", + " 动作创建者返回一个具有 type 属性的对象，该属性指定已发生的动作，然后，该方法将操作对象分发到 Redux store ，根据之前的挑战示例，以下内容是等效的，并且都分发类型 LOGIN 的操作：", + "
store.dispatch(actionCreator());
store.dispatch({ type: 'LOGIN' });
", + + " 代码编辑器中的 Redux store 具有将 login 的属性值设置为 false 的初始化状态对象，还有一个名为 loginAction() 的动作创建器，它返回类型为 LOGIN 的动作，然后通过调用 dispatch 方法将 LOGIN 操作分发给 Redux store，并传递 loginAction() 创建的操作。" ], "files": { "indexjsx": { @@ -218,7 +217,7 @@ " }", "};", "", - "// Dispatch the action here:", + "// 在这里分发动作:", "" ], "head": [], @@ -227,16 +226,16 @@ }, "tests": [ { - "text": "Calling the function loginAction should return an object with type property set to the string LOGIN.", - "testString": "assert(loginAction().type === 'LOGIN', 'Calling the function loginAction should return an object with type property set to the string LOGIN.');" + "text": " 调用函数 loginAction 应该返回一个 type 属性值为字符串 LOGIN 的对象。", + "testString": "assert(loginAction().type === 'LOGIN', '调用函数 loginAction 应该返回一个 type 属性值为字符串 LOGIN 的对象。');" }, { - "text": "The store should be initialized with an object with property login set to false.", - "testString": "assert(store.getState().login === false, 'The store should be initialized with an object with property login set to false.');" + "text": " store 应该初始化一个 login 属性为 false 的对象。", + "testString": "assert(store.getState().login === false, 'store 应该初始化一个 login 属性为 false 的对象。');" }, { - "text": "The store.dispatch() method should be used to dispatch an action of type LOGIN.", - "testString": "getUserInput => assert((function() { let noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return noWhiteSpace.includes('store.dispatch(loginAction())') || noWhiteSpace.includes('store.dispatch({type: \\'LOGIN\\'})') === true })(), 'The store.dispatch() method should be used to dispatch an action of type LOGIN.');" + "text": " 应使用 store.dispatch() 方法分派类型为 LOGIN 的操作。", + "testString": "getUserInput => assert((function() { let noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return noWhiteSpace.includes('store.dispatch(loginAction())') || noWhiteSpace.includes('store.dispatch({type: \\'LOGIN\\'})') === true })(), ' 应使用 store.dispatch() 方法分派类型为 LOGIN 的操作。');" } ], "solutions": [ @@ -1135,4 +1134,4 @@ "redux": true } ] -} \ No newline at end of file +}