Search code examples
reactjsreduxreact-reduxredux-thunkredux-dynamic-modules

React Redux dynamic module loading module with promise instated of state


Technology stack

  • React, React-DOM - 16.11.0
  • Redux - 4.0.4
  • React-redux - 7.1.1
  • redux-dynamic-modules - 5.1.1

I am trying to load reducers dynamically with the help of Redux-Dynamic-Module library and in sample code I did achieve dynamically loading. but while using connect function getting promise instead of state object.

const mapStateToProps = (store: any) => {
    return { products: store.productOptions }    <-- here I'm getting store.productOption as Promise
};


const ProductOptionsWrapper: any = connect<any, any, any, any>(
  mapStateToProps,
  {}
)(ProductOptionComponent);

Did try await to resolve Promise

const mapStateToProps = async (store: any) => {
  let data = store.productOptions;
  data = await data.then((r: any) => r);
  return { product: data };
};

but getting below error and not getting state.

mapStateToProps() in Connect(ProductOptionComponent) must return a plain object. Instead received [object Promise].

and also I'm not able to update store due to in store the data is stored as Promise.

So I need help how to properly use redux-dynamic-module with redux-connect.

Note:- Also using reux-thunk middleware


Solution

  • After searching a lot it was a typo kind of silly mistake.

    I used async reducer function for async calls (just POC of an alternative way of redux-thunk).

    export async function rootReducer(){ ... }
    

    after removing async it's working as expected.