freeCodeCamp/use-a-switch-statement-to-handle-multiple-actions.chinese.md at 91c9fc6cd51e57a5a13127a82f25480a954e3cf6

Files

Oliver Eyton-Williams 61460c8601 fix: insert blank line after ```

search and replace ```\n< with ```\n\n< to ensure there's an empty line
before closing tags

2020-08-16 04:45:20 +05:30

3.7 KiB

Raw Blame History

id, title, challengeType, isRequired, videoUrl, localeTitle

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036151	Use a Switch Statement to Handle Multiple Actions	6	false		使用Switch语句处理多个操作

Description

您可以告诉Redux商店如何处理多种操作类型。假设您在Redux商店中管理用户身份验证。您希望在用户登录和注销时具有状态表示。您使用经过authenticated的属性的单个状态对象来表示它。您还需要动作创建者创建与用户登录和用户注销相对应的操作，以及操作对象本身。

Instructions

代码编辑器为您设置了商店，操作和操作创建器。填写reducer函数以处理多个身份验证操作。在reducer使用JavaScript switch语句来响应不同的操作事件。这是编写Redux减速器的标准模式。 switch语句应该切换action.type并返回适当的身份验证状态。 注意：此时，不要担心状态不变性，因为在这个例子中它很小而且简单。对于每个操作，您可以返回一个新对象 - 例如， {authenticated: true} 。另外，不要忘记在switch语句中写一个返回当前state的default大小写。这很重要，因为一旦您的应用程序有多个Reducer，它们都会在执行操作调度时运行，即使操作与该reducer无关。在这种情况下，您需要确保返回当前state 。

Tests

tests:
  - text: 调用函数<code>loginUser</code>应该返回一个对象，其type属性设置为字符串<code>LOGIN</code> 。
    testString: assert(loginUser().type === 'LOGIN');
  - text: 调用函数<code>logoutUser</code>应该返回一个对象，其type属性设置为字符串<code>LOGOUT</code> 。
    testString: assert(logoutUser().type === 'LOGOUT');
  - text: 应使用经过<code>authenticated</code>属性设置为<code>false</code>的对象初始化存储。
    testString: assert(store.getState().authenticated === false);
  - text: 调度<code>loginUser</code>应该将store状态中的<code>authenticated</code>属性更新为<code>true</code> 。
    testString: assert((function() {  const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })());
  - text: 调度<code>logoutUser</code>应将store状态中的<code>authenticated</code>属性更新为<code>false</code> 。
    testString: assert((function() {  store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false  })());
  - text: <code>authReducer</code>函数应该使用<code>switch</code>语句处理多个动作类型。
    testString: getUserInput => assert( getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default'));

Challenge Seed

const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {
  // change code below this line

  // change code above this line
};

const store = Redux.createStore(authReducer);

const loginUser = () => {
  return {
    type: 'LOGIN'
  }
};

const logoutUser = () => {
  return {
    type: 'LOGOUT'
  }
};

Solution

// solution required

/section>

3.7 KiB Raw Blame History Unescape Escape