Как вызвать асинхронную функцию внутри редукса?

Я следовал этому уроку и думаю, что сделал все, как требуется, однако у меня все еще есть это предупреждение:

Необработанный отказ от обещания: Ошибка: действия должны быть простыми объектами. Вместо этого фактический тип был: «Обещание». Возможно, вам потребуется добавить промежуточное программное обеспечение в настройки вашего магазина, чтобы обрабатывать отправку других значений, например «redux-thunk» для обработки функций отправки. См. https://redux.js.org/tutorials/fundamentals/part-4-store#middleware и https://redux.js.org/tutorials/fundamentals/part-6-async-logic# использование-the-redux-thunk-middleware для примеров.

Мой код:

  1. Внутри папки store это мой index.js файл:
import { createStore, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "../reducers/index";

const composedEnhancer = composeWithDevTools(applyMiddleware(thunkMiddleware)); 
const store = createStore(rootReducer, composedEnhancer);
export default store;

Внутри моего файла App.js:

...
import store from "./redux/store/index";
...
return (
        <Provider store = {store}>
          <NavigationContainer>
            <MainNavigator />
          </NavigationContainer>
        </Provider>
      );

Внутри моего файла MainNavigator:

import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import {someAsyncFunctionFromRedux} from "../../redux/actions/index";
...
const MainComponent = (props) => {
  ...

  useEffect(() => {
    async function f() {
      await props.someAsyncFunctionFromRedux();
    }
    f();
  }, []);

Внутри моего actions/index.js

export async  function someAsyncFunction() {
   return  async (dispatch) => {
     await firebase
      .firestore()
      .collection("Users")
      .get()
      .then( (snapshot) => {
        let users = [];
        snapshot.docs.map((doc) => {
          const data = doc.data();
          const id = doc.id;
          users.push({id, ...data})
        })
        dispatch({ type: USERS_STATE_CHANGE, users });
      });
  };
}

Не уверен, что это проблема, но вам не нужна await обещанная функция. Попробуйте удалить await или .then()

imjared 12.02.2023 14:40

другие преобразователи - даже если нет async - работают нормально? может я что-то упускаю, но мне кажется, что redux-thunk не включен в магазин по какой-то причине

skyboyer 12.02.2023 14:51

Даже если вы используете устаревший Redux, все равно не используйте метод метода connect, а вместо этого используйте хук useDispatch. connect — это только устаревший уровень совместимости для компонентов устаревшего класса. Однако в целом имейте в виду, что, поскольку в этом руководстве несколько раз говорится, в нем показаны только внутренние компоненты Redux, а не то, как вы должны писать Redux в настоящее время. Для этого следуйте руководству «Основы Redux» с того же сайта.

phry 12.02.2023 15:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
69
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я не совсем уверен, в чем проблема, поскольку предоставленный вами код несовместим: в MainNavigator вы импортируете someAsyncFunctionFromRedux, но в вашем примере кода есть только someAsyncFunction. Если это одна и та же функция и просто пример неверен, проблема может заключаться в том, что вы возвращаете асинхронную функцию из асинхронной функции. Попробуйте это (с некоторыми улучшениями кода):

export async function someAsyncFunction(dispatch) {
  const snapshot = await firebase
    .firestore()
    .collection("Users")
    .get();
  const users = snapshot
    .docs
    .map(({ id, data }) => ({ id, ...data() }));
  dispatch({ type: USERS_STATE_CHANGE, users });
}

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

см. ссылку на документацию:

Преобразователь Redux

Так поступает ОП.

phry 12.02.2023 20:24

Другие вопросы по теме