Как обновить данные в redux c асинхронной функции?

Question

[Александр Бондаренко]

У меня есть walletReducer, который может изменяться в зависимости от действий юзера, к примеру когда сменить кошелек я должен обновить его адрес и баланс на сайте. Получаю эти данные я в асинхронной функции и сейчас обновление не получается.

const walletDefaultState = {
  web3: {},
  account: "",
  balance: "",
};

const CONNECT_BY_METAMASK = "CONNECT_BY_METAMASK";
const WALLET_CONNECT = "WALLET_CONNECT";

export const walletReducer = (state = walletDefaultState, action) => {
  switch (action.type) {
    case CONNECT_BY_METAMASK:
      return { ...state, ...action.payload };
    case WALLET_CONNECT:
      return { ...state, cash: state.cash - action.payload };
    default:
      return state;
  }
};

export const connectByMetaMaskAction = (payload) => ({
  type: CONNECT_BY_METAMASK,
  payload,
});

import Web3 from "web3";
import { connectByMetaMaskAction } from "../../store/walletReducer";

export function createWeb3Listeners() {
  if (window.ethereum) {
    window.ethereum.on("accountsChanged", async () => {
      console.log("accountsChanged");
      const web3 = new Web3(window.ethereum);
      let accounts = await web3.eth.getAccounts();
      let balance = await web3.eth.getBalance(accounts[0]);
      dispatch(connectByMetaMaskAction({ web3, accounts, balance }));
    });

    window.ethereum.on("chainChanged", () => {
      console.log("chainChanged");
    });

    window.ethereum.on("disconnect", () => {
      console.log("disconnect");
    });
  }
}

Answer 1

[Damir Aushenov]

Для асинхронной логики вам нужно подключить библиотеку redux-thunk или подобную ей,
потому что actions в Redux они синхронные по умолчанию

Comments

[Александр Бондаренко]

У меня уже подключен redux-thunk, вопрос в том как прокинуть эти данные. Когда я просто подключаю кошелек, я возвращаю из функции dispatch, и потом саму функцию ещё раз оборачиваю в dispatch. Как мне здесь действовать?

[Damir Aushenov]

а можно пример кода