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

【问题标题】：Use custom middleware for async actions. Actions must be plain objects使用自定义中间件进行异步操作。动作必须是普通对象
【发布时间】：2020-06-17 03:41:01
【问题描述】：

我是新手，出现了这个错误，看了很多解决办法，没有任何帮助解决。

store.js 中的另一个错误。当指向thunk。 参数类型 ThunkMiddleware & {withExtraArgument (extraArgument: E): ThunkMiddleware{}, AnyAction, E>} 不能分配给参数类型 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));

网络包

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"]
      }
    ]
  }
};

【问题讨论】：

标签： javascript reactjs webpack redux redux-thunk

【解决方案1】：

你的 getFreeData 函数不应该是异步的，否则它会返回一个 Promise。

相反，返回 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);
    }
  }
}

希望这会有所帮助。

【讨论】：