3.6 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036157	Escribe un contador con Redux	6	301453	write-a-counter-with-redux

--description--

¡Ahora ya has aprendido todos los principios básicos de Redux! Has visto cómo crear acciones y creadores de acción, crear un almacén Redux, enviar tus acciones contra el almacén y diseñar actualizaciones de estado con reductores puros. Incluso has visto cómo gestionar estados complejos con la composición de reductores y manejar acciones asíncronas. Estos ejemplos son simplistas, pero estos conceptos son los principios básicos de Redux. Si los entiendes bien, estás listo para empezar a construir tu propia aplicación Redux. Los próximos desafíos cubren algunos de los detalles relacionados con la inmutabilidad de state, pero primero, aquí hay un repaso de todo lo que has aprendido hasta ahora.

--instructions--

En esta lección, implementarás un simple contador con Redux desde cero. El editor de código proporciona lo básico, ¡pero tendrás que completar los detalles! Utiliza los nombres que se proporcionan y define los creadores de acciones incAction y decAction, el counterReducer(), los tipos de acción INCREMENT y DECREMENT, y finalmente el store de Redux. Una vez que hayas terminado deberías poder enviar acciones INCREMENT o DECREMENT para incrementar o disminuir el estado mantenido en el store. ¡Buena suerte construyendo tu primera aplicación Redux!

--hints--

El creador de acción incAction debe devolver un objeto de acción con type igual al valor de INCREMENT

assert(incAction().type === INCREMENT);

El creador de acción decAction debe devolver un objeto de acción con type igual al valor de DECREMENT

assert(decAction().type === DECREMENT);

El almacén Redux debe inicializarse con un state de 0.

assert(_store.getState() === 0);

El envío de incAction en el almacén Redux debe incrementar el state en 1.

assert(
  (function () {
    const initialState = _store.getState();
    _store.dispatch(incAction());
    const incState = _store.getState();
    return initialState + 1 === incState;
  })()
);

El envío de decAction en el almacén Redux debe disminuir el state en 1.

assert(
  (function () {
    const initialState = _store.getState();
    _store.dispatch(decAction());
    const decState = _store.getState();
    return initialState - 1 === decState;
  })()
);

counterReducer debe ser una función

assert(typeof counterReducer === 'function');

--seed--

--seed-contents--

const INCREMENT = null; // Define a constant for increment action types
const DECREMENT = null; // Define a constant for decrement action types

const counterReducer = null; // Define the counter reducer which will increment or decrement the state based on the action it receives

const incAction = null; // Define an action creator for incrementing

const decAction = null; // Define an action creator for decrementing

const store = null; // Define the Redux store here, passing in your reducers

--after-user-code--

const _store = Redux.createStore(counterReducer)

--solutions--

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

const counterReducer = (state = 0, action) => {
  switch(action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};

const incAction = () => {
  return {
    type: INCREMENT
  }
};

const decAction = () => {
  return {
    type: DECREMENT
  }
};

const store = Redux.createStore(counterReducer);

3.6 KiB Raw Blame History