freeCodeCamp

4.0 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036150	Handle an Action in the Store	6	false		Manejar una acción en la tienda

Description

Después de crear y enviar una acción, la tienda Redux debe saber cómo responder a esa acción. Este es el trabajo de una función reducer . Los reductores en Redux son responsables de las modificaciones de estado que tienen lugar en respuesta a las acciones. Un reducer toma el state y la action como argumentos, y siempre devuelve un nuevo state . Es importante ver que este es el único papel del reductor. No tiene efectos secundarios: nunca llama a un punto final de la API y nunca tiene sorpresas ocultas. El reductor es simplemente una función pura que toma estado y acción, luego devuelve un nuevo estado. Otro principio clave en Redux es que el state es de solo lectura. En otras palabras, la función reducer siempre debe devolver una nueva copia del state y nunca modificar el estado directamente. Redux no impone la inmutabilidad del estado, sin embargo, usted es responsable de hacerlo cumplir en el código de sus funciones de reductor. Practicarás esto en desafíos posteriores.

Instructions

El editor de código tiene el ejemplo anterior, así como el inicio de una función de reducer para usted. Complete el cuerpo de la función del reducer modo que si recibe una acción del tipo 'LOGIN' , devuelva un objeto de estado con el login establecido en true . De lo contrario, devuelve el state actual. Tenga en cuenta que el state actual y la action distribuida se pasan al reductor, por lo que puede acceder al tipo de acción directamente con action.type .

Tests

tests:
  - text: Llamar a la función <code>loginAction</code> debe devolver un objeto con la propiedad type establecida en la cadena <code>LOGIN</code> .
    testString: 'assert(loginAction().type === "LOGIN", "Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.");'
  - text: La tienda debe inicializarse con un objeto con el <code>login</code> propiedad establecido en <code>false</code> .
    testString: 'assert(store.getState().login === false, "The store should be initialized with an object with property <code>login</code> set to <code>false</code>.");'
  - text: Despachando <code>loginAction</code> debe actualizar la propiedad de <code>login</code> en el estado de la tienda a <code>true</code> .
    testString: 'assert((function() {  const initialState = store.getState(); store.dispatch(loginAction()); const afterState = store.getState(); return initialState.login === false && afterState.login === true })(), "Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.");'
  - text: 'Si la acción no es de tipo <code>LOGIN</code> , la tienda debería devolver el estado actual.'
    testString: 'assert((function() { store.dispatch({type: "__TEST__ACTION__"}); let afterTest = store.getState(); return typeof afterTest === "object" && afterTest.hasOwnProperty("login") })(), "If the action is not of type <code>LOGIN</code>, the store should return the current state.");'

Challenge Seed

const defaultState = {
  login: false
};

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

  // change code above this line
};

const store = Redux.createStore(reducer);

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

Solution

// solution required

4.0 KiB Raw Blame History