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

Question

I am new to this, and this error occurs, looked at a lot of solutions on it, nothing helped to fix.

Another mistake in store.js. When point to thunk. Argument type ThunkMiddleware & {withExtraArgument (extraArgument: E): ThunkMiddleware{}, AnyAction, E>} is not assignable to parameter type Function

Actions.js

export const SET_YEAR = 'SET_YEAR';
export const FETCH_USERS_EXAMPLE = "FETCH_USERS_EXAMPLE";

export function setYear(year) {
    return {
        type: 'SET_YEAR',
        payload: year,
    }
}

export async function getFreeData() {
    try {
        return async (dispatch) => {
            let res = await fetch(`https://jsonplaceholder.typicode.com/users`);
            let userList = await res.json();
            dispatch({
                type: "FETCH_USERS_EXAMPLE",
                payload: userList
            });
            return userList;
        }
    } catch (e) {
        console.log("Error", e);
    }
}

Reducer.js

import {SET_YEAR, FETCH_USERS_EXAMPLE} from '../Actions/TestAction';

export function testReducer(state ={year: ''}, action) {
    switch (action.type) {
        case 'SET_YEAR':
            return {...state, year: action.payload};
        case 'FETCH_USERS_EXAMPLE':
            return {...state, userList: action.payload};
        default:
            return state
    }
}

Container.js

import TestComponent from "./TestComponent";
import {setYear, getFreeData} from "../../Redux/Actions/TestAction";
import {connect} from "react-redux";
import React from "react";


const mapStateToProps = (store) => ({
    items: store.user,
    userList: store.page.userList,
    year: store.page.year
});

const mapDispatchToProps = {
    setYear,
    getFreeData
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(TestComponent);

Store.js

import {createStore, applyMiddleware} from 'redux'
import {rootReducer} from './Reducers/rootReducer';
import thunk from 'redux-thunk';
import logger from "redux-logger";

export const store = createStore(rootReducer, applyMiddleware(thunk, logger));

webpack

const path = require("path");

module.exports = {
  entry: ['babel-polyfill', "./src/index.js"],
  mode: "development",
  output: {
    filename: "./main.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 3000,
    watchContentBase: true,
    progress: true
  },

  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: ['raw-loader']
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
      ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      }
    ]
  }
};

Answer 1

Your getFreeData function should not be async or it will return a promise.

Instead, return the function for redux-thunk:

export function getFreeData() {
  return async (dispatch) => {
    try {
      let res = await fetch(`https://jsonplaceholder.typicode.com/users`);
      let userList = await res.json();
      dispatch({
        type: "FETCH_USERS_EXAMPLE",
        payload: userList
      });
      return userList;
    }
    catch (e) {
      console.log("Error", e);
    }
  }
}

Hope this helps.