Error: Actions must be plain objects. Use custom middleware for async actions.

[chengzh2008]

While working on the chapter 7 about connecting Store to ProductsPage, I encountered this strange behavior. The compiling works fine without issue and the pages loads correctly, then about a second later, it shows the message below. Not quite sure what what happened. Seems like an asynchronous issue. Any help would be really appreciated.

Thanks.

× ←→1 of 2 errors on the page Error: Actions must be plain objects. Use custom middleware for async actions. ▶ 2 stack frames were collapsed. getProducts src/ProductsPage.tsx:62 59 | 60 | const mapDispatchToProps = (dispatch: any) => { 61 | return {

62 | getProducts: () => dispatch(getProducts()) 63 | }; 64 | } 65 | View compiled ProductsPage.componentDidMount src/ProductsPage.tsx:18 15 | class ProductsPage extends React.Component { 16 | 17 | public componentDidMount() { 18 | this.props.getProducts(); 19 | } 20 | 21 | public render() { View compiled ▶ 13 stack frames were collapsed. This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

[carlrip]

It sounds like the the thunk middleware hasn't been registered in your store. If you have a look at Store.ts, what does the configureStore function look like? Does it add the thunk middleware like below:

export default function configureStore(): Store<IApplicationState> {
  const store = createStore(rootReducer, undefined, applyMiddleware(thunk));
  return store;
}

https://github.com/carlrip/LearnReact17WithTypeScript/blob/master/08-ReactRedux%EF%BB%BF/src/Store.ts

[chengzh2008]

Thanks for the looking.

Yeah, I did that part. see https://github.com/chengzh2008/my-react-ts-app/blob/master/src/Store.tsx

[carlrip]

I've just looked at your code in your repo .... It looks like your getProducts reference in ProductsPage.tsx references the function in ProductsData.ts rather than the one in ProductsActions.ts

So, if you change:

import { getProducts } from "./ProductsData";

in ProductsPage.tsx to

import { getProducts } from "./ProductsActions";

it works ok.

[chengzh2008]

Thank you very much for the help. That solved the problem.