Как передать асинхронные параметры в action (redux, thunk)?

Question

[zzzeeezzz]

У меня проблема при передаче данных в action. У меня есть файл actions.js, в котором есть функция setCart(value) на вход он принимает какое либо значение.

export const setCart = (value) => ({type: ADD_TO_CART, payload: value});

Также есть файл app.js в котором я передаю значение в action

const App = ({setCart}) => {

  const fetchCart = async () => {
    const res = await commerce.cart.retrieve()
    setCart(res);
  };

}

const mapDispatchToProps = {
  setCart
}

export default connect(null, mapDispatchToProps)(App);

Но так как передаваемый параметр асинхронный, я не могу правильно передать его в actions.js. Знаю что надо использовать middleware(thunk), но не понимаю как его использовать при передачи асинхронного параметра.
Можете помочь разобраться ?

Comments

[Алексей]

Я уже давно не использовал connect, но вроде для передачи параметров использовал функцию mapDispatchToProps вместо объекта:

const mapDispatchToProps = (dispatch) => ({ 
    setCart: (value) => dispatch(setCart(value))
});

[Егор Живагин]

Алексей, можно и объект, все его значения обернутся в dispatch под капотом

[Егор Живагин]

Вообще кажется, что всё должно работать. Экшн у вас не асинхронный, thunk тут не причём, я бы скорее советовал смотреть на реализацию commerce.cart.retrieve , возможно, это промис, который возвращает ещё один промис? Иначе я не вижу, почему что-то может идти не так

В чём вообще ошибка-то?

[Алексей]

Егор Живагин, а разве в такой реализации, как сейчас, не будет dispatch передаваться 1м параметром в setCart, если mapDispatchToProps просто в функцию dispatch оборачивает?

[Егор Живагин]

Алексей, хороший вопрос, я забыл об этом) Вероятно вы правы