Skąd wiadomo, że argumentem w metodzie incrementAsync jest dispatch()?

sajek587

2022-12-29T13:20:15+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 238

Skąd wiadomo, że argumentem w metodzie incrementAsync jest metoda dispatch przy korzystaniu z Redux Thunka?

Kopiuj

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // You can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

Czy jest to oparte na implementacji middleware'a w Reduxie? We wspomnianej implementacji druga funkcja przyjmuje metodę dispatch.

Xarviel

2022-12-29T14:25:10+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 847

Wydaje mi się, że trochę mylisz pojęcia..., bo funkcja incrementAsync() zwraca jedynie callback z jednym parametrem, który może nazywać się dowolnie i w każdym przypadku zadziała to identycznie

Kopiuj

const runCallback = (callback) => callback((value) => console.log(value));

function incrementAsync() {
  return dispatch => {
    dispatch({ name: 'dispatch' });
  }
}

function incrementAsync2() {
  return alaMaKota => {
    alaMaKota({ name: 'alaMaKota' });
  }
}

function incrementAsync3() {
  return aKotMaAle => {
    aKotMaAle({ name: 'aKotMaAle' });
  }
}

runCallback(incrementAsync());  // console.log({ name: 'dispatch' })
runCallback(incrementAsync2()); // console.log({ name: 'alaMaKota' })
runCallback(incrementAsync3()); // console.log({ name: 'aKotMaAle' })

W Reduxie, działa to dokładnie tak samo, tylko zamiast wyświetlać tekst w konsoli zostaje zaktualizowany stan reducera dzięki funkcjom connect(), mapStateToProps(), mapDispatchToProps().

https://react-redux.js.org/api/connect

Kopiuj

const MyComponent = ({ incrementAsync, incrementAsync2, incrementAsync3 }) => {
  //
}

const mapStateToProps = (...) => {
  // ...
}

const mapDispatchToProps = (dispatch) => {
  return {
    incrementAsync: () => dispatch(incrementAsync()),
    incrementAsync2: () => dispatch(incrementAsync2()),
    incrementAsync3: () => dispatch(incrementAsync3()),
  }
}

// Funkcja connect wywołuje funkcje mapStateToProps, oraz mapDispatchToProps
// i łączny wynik, który otrzyma wstawia do naszego komponentu jako propsy
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);