4.1 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036151	Usar um comando switch para lidar com várias ações	6	301449	use-a-switch-statement-to-handle-multiple-actions

--description--

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

--instructions--

O editor de código tem uma store, actions e criadores de actions configurados para você. Preencha a função reducer para lidar com várias ações de autenticação. Use a instrução do JavaScript switch no reducer para responder a diferentes eventos de ação. Este é um padrão para escrever reducers do Redux. O comando switch deve mudar acima de action.type e retornar o estado de autenticação apropriado.

Observação: neste ponto, não se preocupe com imutabilidade do state, 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 se esqueça de escrever um caso default na sua instrução switch que retorna o stateatual. Isso é importante porque, como seu aplicativo tem vários redutores, eles são executados toda vez que uma ação é enviada, mesmo quando a ação não é relacionada a esse reducer. Nesses casos, você quer garantir que você retorna o state atual.

--hints--

Chamar a função loginUser deve retornar um objeto com a propriedade type definida para a string LOGIN.

assert(loginUser().type === 'LOGIN');

Chamar a função logoutUser deve retornar um objeto com a propriedade type definida para a string LOGOUT.

assert(logoutUser().type === 'LOGOUT');

A store deve ser inicializada com um objeto com a propriedade authenticated definido como false.

assert(store.getState().authenticated === false);

Despachar loginUser deve atualizar a propriedade authenticated no state da store para true.

assert(
  (function () {
    const initialState = store.getState();
    store.dispatch(loginUser());
    const afterLogin = store.getState();
    return (
      initialState.authenticated === false && afterLogin.authenticated === true
    );
  })()
);

Despachar logoutUser deve atualizar a propriedade authenticated no state da store para false.

assert(
  (function () {
    store.dispatch(loginUser());
    const loggedIn = store.getState();
    store.dispatch(logoutUser());
    const afterLogout = store.getState();
    return (
      loggedIn.authenticated === true && afterLogout.authenticated === false
    );
  })()
);

A função authReducer deve lidar com vários tipos de ação com um comando switch.

(getUserInput) =>
  assert(
    getUserInput('index').toString().includes('switch') &&
      getUserInput('index').toString().includes('case') &&
      getUserInput('index').toString().includes('default')
  );

--seed--

--seed-contents--

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'
  }
};

--solutions--

const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {

  switch (action.type) {

    case 'LOGIN':
      return {
        authenticated: true
      }

    case 'LOGOUT':
      return {
        authenticated: false
      }

    default:
      return state;

  }

};

const store = Redux.createStore(authReducer);

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

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

4.1 KiB Raw Blame History