Я следовал этому уроку и думаю, что сделал все, как требуется, однако у меня все еще есть это предупреждение:
Необработанный отказ от обещания: Ошибка: действия должны быть простыми объектами. Вместо этого фактический тип был: «Обещание». Возможно, вам потребуется добавить промежуточное программное обеспечение в настройки вашего магазина, чтобы обрабатывать отправку других значений, например «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 для примеров.
Мой код:
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 });
});
};
}
другие преобразователи - даже если нет async
- работают нормально? может я что-то упускаю, но мне кажется, что redux-thunk
не включен в магазин по какой-то причине
Даже если вы используете устаревший Redux, все равно не используйте метод метода connect
, а вместо этого используйте хук useDispatch
. connect
— это только устаревший уровень совместимости для компонентов устаревшего класса. Однако в целом имейте в виду, что, поскольку в этом руководстве несколько раз говорится, в нем показаны только внутренние компоненты Redux, а не то, как вы должны писать Redux в настоящее время. Для этого следуйте руководству «Основы Redux» с того же сайта.
Я не совсем уверен, в чем проблема, поскольку предоставленный вами код несовместим: в 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, и я думаю, что это лучшая практика.
см. ссылку на документацию:
Так поступает ОП.
Не уверен, что это проблема, но вам не нужна
await
обещанная функция. Попробуйте удалитьawait
или.then()