4.2 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036151	Usa una sentencia Switch para manejar múltiples acciones	6	301449	use-a-switch-statement-to-handle-multiple-actions

--description--

Puedes decirle al almacén Redux cómo manejar múltiples tipos de acción. Digamos que estás gestionando la autenticación de usuarios en tu almacén Redux. Quieres tener una representación de estado para cuando los usuarios están conectados y cuando están desconectados. Esto se representa con un único objeto de estado con la propiedad authenticated. También se necesitan creadores de acción que creen acciones correspondientes al inicio y cierre de sesión de los usuarios, junto con los propios objetos de acción.

--instructions--

El editor de código tiene un almacén, acciones y creadores de acción configurados para ti. Rellena la función reducer para manejar múltiples acciones de autenticación. Usa una sentencia switch de JavaScript en el reducer para responder a diferentes eventos de acción. Este es un patrón estándar en la escritura de reductores Redux. La sentencia switch debe cambiar sobre action.type y devolver el estado de autenticación apropiado.

Nota: En este punto, no te preocupes por la inmutabilidad del estado, ya que es pequeña y simple en este ejemplo. Para cada acción, puedes devolver un nuevo objeto, por ejemplo, {authenticated: true}. Además, no olvides escribir un caso default en tu sentencia switch que devuelva el state actual. Esto es importante porque una vez que tu aplicación tiene múltiples reductores, todos ellos se ejecutan cada vez que se realiza un envío de acción, incluso cuando la acción no está relacionada con ese reductor. En tal caso, querrás asegurarte de que devuelves el state actual.

--hints--

La llamada a la función loginUser debe devolver un objeto con la propiedad type establecida a la cadena LOGIN.

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

La llamada a la función logoutUser debe devolver un objeto con la propiedad type establecida a la cadena LOGOUT.

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

El almacén debe ser inicializado con un objeto con una propiedad authenticated establecida a false.

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

El envío de loginUser debe actualizar la propiedad authenticated en el estado del almacén a true.

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

El envío de logoutUser debe actualizar la propiedad authenticated en el estado del almacén a false.

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

La función authReducer debe manejar múltiples tipos de acción con una sentencia 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.2 KiB Raw Blame History