1

Estoy aprendiendo Redux y tengo una duda cuando aplico en este sencillo ejemplo:

const redux = require('redux');

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === 'increment') {
    return {
      counter: state.counter + 1,
    };
  }

  if (action.type === 'decrement') {
    return {
      counter: state.counter - 1,
    };
  }

  return state;
};

const store = redux.createStore(counterReducer);

const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
};

store.subscribe(counterSubscriber);

store.dispatch({ type: 'increment' });
store.dispatch({ type: 'decrement' });

Obtengo como resultado :

{ counter: 1 }
{ counter: 0 }

Pero no debería obtener :

{ counter: 1 }
{ counter: -1 }

Porque el state inicia en 0 state = { counter: 0 } . Entonces al llamar a increment suma 1 y en decrement le resta 1 ?

1 respuesta 1

1

Los métodos dispatch se comportan como cualquier otra función en JavaScript, se ejecutan en secuencia.

Dicho esto y siguiendo la secuencia del código del OP, primero se ejecuta:

//JS: invoca al metodo dispatch de store
//el action object especifica increment
store.dispatch({ type: 'increment' });

El estado inicial es state = { counter: 0 }:

//JS: invoca al metodo dispatch de store
//el action object especifica increment
//en este momento state = { counter: 0 }
//entonces, según el reducer increment: 0+1=1
store.dispatch({ type: 'increment' });
//JS: el valor del estado ya cambio
//paso de 0 a 1
//el store nos ayuda a persistir el cambio

Luego, el store nos ayuda a persistir los cambios de valores en el estado, entonces al momento de invocar a:

store.dispatch({ type: 'decrement' });

El estado es state = { counter: 1 }:

//state = { counter: 0 }
store.dispatch({ type: 'increment' }); //state = { counter: 1 }
//JS: invoca al metodo dispatch de store
//el action object especifica decrement
//en este momento state = { counter: 1 }
//entonces, según el reducer increment: 1-1=0
store.dispatch({ type: 'decrement' });//state = { counter: 0 }

Puede que también sea confuso el método subscribe, pues esta declarado antes de la invocación de los métodos dispatch:

const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
};

store.subscribe(counterSubscriber);

Solo hay que recordar que este método pide una función que sera invocada inmediatamente después de cada dispatch.

En este caso la función que se va a invocar después de cada dispatch es counterSubscriber, que es donde se esta monitoreando por consola los cambios de estado.

Espero que esta respuesta sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.