freeCodeCamp/curriculum/challenges/portuguese/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.portuguese.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036151	Use a Switch Statement to Handle Multiple Actions	6	false		Use uma instrução de troca para lidar com várias ações

Description

Você pode dizer ao repositório do Redux como lidar com vários tipos de ação. Digamos que você esteja gerenciando a autenticação do usuário em sua loja Redux. Você deseja ter uma representação de estado para quando os usuários estão conectados e quando estão desconectados. Você representa isso com um único objeto de estado com a propriedade authenticated . Você também precisa de criadores de ações que criem ações correspondentes ao login do usuário e ao logout do usuário, juntamente com os próprios objetos de ação.

Instructions

O editor de código tem uma loja, ações e criadores de ações configurados para você. Preencha a função reducer para lidar com várias ações de autenticação. Use uma instrução switch JavaScript no reducer para responder a diferentes eventos de ação. Este é um padrão padrão na reducção de redutores Redux. A instrução switch deve alternar action.type e retornar o estado de autenticação apropriado. Nota: Neste ponto, não se preocupe com a imutabilidade do estado, já que é pequeno e simples neste exemplo. Para cada ação, você pode retornar um novo objeto - por exemplo, {authenticated: true} . Além disso, não esqueça de escrever um caso default na instrução switch que retorne o state atual. Isso é importante porque, depois que seu aplicativo tiver vários redutores, todos eles serão executados a qualquer momento em que um envio de ação for feito, mesmo quando a ação não estiver relacionada a esse redutor. Nesse caso, você deseja certificar-se de retornar o state atual.

Tests

tests:
  - text: Chamar a função <code>loginUser</code> deve retornar um objeto com a propriedade type configurada para a string <code>LOGIN</code> .
    testString: 'assert(loginUser().type === "LOGIN", "Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.");'
  - text: Chamar a função <code>logoutUser</code> deve retornar um objeto com a propriedade type configurada para a string <code>LOGOUT</code> .
    testString: 'assert(logoutUser().type === "LOGOUT", "Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.");'
  - text: A loja deve ser inicializada com um objeto com uma propriedade <code>authenticated</code> configurada como <code>false</code> .
    testString: 'assert(store.getState().authenticated === false, "The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.");'
  - text: Despachando <code>loginUser</code> deve atualizar a propriedade <code>authenticated</code> no estado de armazenamento para <code>true</code> .
    testString: 'assert((function() {  const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), "Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.");'
  - text: Dispatching <code>logoutUser</code> deve atualizar a propriedade <code>authenticated</code> no estado de armazenamento para <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  })(), "Dispatching <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.");'
  - text: A função <code>authReducer</code> deve manipular vários tipos de ação com uma instrução <code>switch</code> .
    testString: 'getUserInput => assert( getUserInput("index").toString().includes("switch") && getUserInput("index").toString().includes("case") && getUserInput("index").toString().includes("default"), "The <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.");'

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