How do I call async function inside redux?

Question

I have followed this tutorial and I think I have done everything as required however I still have this warning:

Unhandled promise rejection: Error: Actions must be plain objects. Instead, the actual type was: 'Promise'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.

My code:

Inside folder store this is my index.js file:

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;

Inside my App.js file:

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

Inside my MainNavigator file:

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();
  }, []);

Inside my 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 });
      });
  };
}

Not sure if it's the issue but you shouldn't need to await a promise-ified function. Try removing either the await or the .then() — imjared
– imjared, Commented Feb 12, 2023 at 13:40
are other thunks - even if not async - are working fine? maybe I miss something but to me it seems like redux-thunk is not enabled to the store for some reason — skyboyer
– skyboyer, Commented Feb 12, 2023 at 13:51
Even if you are using legacy Redux, please still don't use the connect method method, but the useDispatch hook instead. connect is only a legacy compatibility layer for legacy class components. Generally though, keep in mind that, as this tutorial states mutliple times throughout, it only shows Redux internals, not how you should write Redux nowadays. For that, please follow the "Redux essentials" tutorial from the same site. — phry
– phry, Commented Feb 12, 2023 at 14:11

Dimitri Lavrenük · Accepted Answer · 2023-02-12 20:52:58Z

2

I'm not exactly sure what the issue is, since the code you have provided is not consistent: in MainNavigator you are importing a someAsyncFunctionFromRedux but your example code only has a someAsyncFunction. If it is the same function and just the example is wrong then the problem could be that you are returning an async function from an async function. Try this one (with some code improvements):

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 });
}

edited Feb 12, 2023 at 20:52

answered Feb 12, 2023 at 13:55

Dimitri Lavrenük

4,9091 gold badge19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satish Birhade · Accepted Answer · 2023-02-12 14:24:31Z

1

The better way for using async functions with state management you have to use Redux-Thunk middleware and it is best practice I think.

see blow link for documentation:

Redux Thunk

answered Feb 12, 2023 at 14:24

Satish Birhade

474 bronze badges

1 Comment

phry Over a year ago

That's way OP is doing.

Collectives™ on Stack Overflow

How do I call async function inside redux?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related