Используйте пользовательское промежуточное программное обеспечение для действий asyn c. Действия должны быть простыми объектами - PullRequest
Новая
       1

Используйте пользовательское промежуточное программное обеспечение для действий asyn c. Действия должны быть простыми объектами

0 голосов
/ 04 марта 2020

Я новичок в этом, и эта ошибка возникает, я посмотрел множество решений, но ничего не помогло исправить.

Еще одна ошибка в магазине. js. Когда указывают на стук. Тип аргумента ThunkMiddleware & {withExtraArgument (extraArgument: E): ThunkMiddleware {}, AnyAction, E>} нельзя назначить типу параметра Функция

Действия. 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);
    }
}

Редуктор. 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
    }
}

Контейнер. 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);

Магазин. 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"]
      }
    ]
  }
};

1 Ответ

0 голосов
/ 05 марта 2020

Ваша getFreeData функция не должна быть асинхронной c, иначе она вернет обещание.

Вместо этого верните функцию для 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);
    }
  }
}

Надеюсь, это поможет .

...