Reactjs React Reducet动作必须是普通对象。使用自定义中间件进行异步操作

晚上好,

我试图在React中使用

Redux

和

Redux-thunk

，我得到一个异步操作错误：

React Reducet动作必须是普通对象。使用自定义中间件进行异步操作

在Shop.js中：

dispatch（fetchProducts（））

我的代码如下：

Store.js：

import { combineReducers, createStore } from 'redux';
import sessionReducer from '../features/session/SessionSlice';
import shopReducer from '../features/shop/ShopSlice';

const rootReducer = combineReducers({
    session: sessionReducer,
    shop: shopReducer,
})

const ReduxStore = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default ReduxStore;

ShopSlice.js：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

const shopInitialState = {
  products: [],
  status: 'idle',
  error: null,
};

export const fetchProducts = createAsyncThunk('shop/fetchProducts', async () => {
  const response = await fetch('https://my.server.org:8000/shop/list/', {
            mode: 'cors',
            method: 'GET',
            headers: {
                'Accept': 'application/json, text/plain',
                'Content-Type': 'application/json;charset=UTF-8',
                'Authentication' : 'Token 8469w25e796df59e1161c4ff8fa1f610053f62a4',
            },
            body: '',
        }).catch((error) => console.log(error));
  return response.json();
});

export const shopSlice = createSlice({
  name: 'shop',
  initialState: shopInitialState,
  reducers: {
      shopSetLoading: state => {
          state.status = 'loading';
      },
      shopSetError: (state, action) => {
          state.error = action.payload;
          state.status = 'error';
      },
      shopDestroy: state => {
          state = shopInitialState;
      },
  },
  extraReducers: {
      [fetchProducts.fulfilled]: (state, action) => {
        state.products.push(action.payload)
        state.status = 'success'
      },
      [fetchPosts.pending]: (state, action) => {
        state.status = 'loading'
      },
    }
});

export const { shopDestroy } = shopSlice.actions;

export const selectShop = state => state.shop;

export default shopSlice.reducer;

shop.js：

import React, { useEffect } from "react";
import { useDispatch, useSelector } from 'react-redux';
import { fetchProducts, selectShop } from './ShopSlice';

function Shop(props) {
    const dispatch = useDispatch();
    const shop = useSelector(selectShop);

    if (shop.status === 'idle') {
        dispatch(fetchProducts());
    }

    return (
        <div className="shop-container">
           <span>Shop</span><br />
           <span>Status: {shop.status}</span><br />
           <span>Products: {JSON.stringify(shop.products)}</span>
        </div>
    );
}

export default Shop;

但是我不能使用外还原剂

任何建议都将非常感谢。
现在可能已经解决，但在使用
configureStore
时，您似乎禁用了
thunk
中间件。
function checkAndInitShop() {
    const dispatch = useDispatch();
    const shop = useSelector(selectShop);

    async function getProductsFromAPI() {
        axios.get('https://my.server.org:8000/shop/list/')
            .then(function (response) {
                if(response.status === 200){
                    let fetchedData = response.data;
                    dispatch(shopInitProducts(fetchedData));
                }
            })
            .catch(function (error) {
                dispatch(shopSetError(error));
                console.log(error);
            });
    }

    if (shop.status === 'idle') {
        dispatch(shopSetLoading());
        getProductsFromAPI();
    }
}