Javascript reactjs redux操作必须是普通对象

我有一个问题“操作必须是普通对象。使用自定义中间件进行异步操作。”

我将reactjs用于这个样板文件（） 我浪费了1天来解决这个问题，但没有结果。我试着将请求移动到动作中（没有传奇），结果是一样的

我的组成部分：

我的行动：

我的减速机：

我的传奇：

编辑： @Alleo Indong，我尝试了你的建议，几乎奏效了

我将组件映射DispatchToprops更改为

export function mapDispatchToProps(dispatch) {
  return {
    getData: () => dispatch(loadNews()),
  };
}

并向actions.js添加新功能

export function loadNews() {
  return {
    type: NEWS_FETCH_SUCCESS,
  }
}

但是现在ajax每秒钟发送一次，就像在while循环中一样。我尝试调用

this.props.getData（）componentDidMount

和

constructor

中进行编码，结果相同

编辑2 在我添加的组件中

import * as  actionCreators from './actions';
import { bindActionCreators } from 'redux';

我改变了

constructor(props) {
  super(props);

  const {dispatch} = this.props;

  this.boundActionCreators = bindActionCreators(actionCreators, dispatch)
}

但是这里的

dispatch

是未定义的，并且也在

componentDidMount

中。 并将

mapDispatchToProps

更改为

export function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators(actionCreators, dispatch),
  };
}

---

您好@欢迎来到stackoverflow！正如我在主帖子的评论中提到的，您正在调度一个生成器，而不是您的服务器上的一个对象

dispatch（saga（））

这里有一个例子可以帮助你

在组件上，导入要像这样使用的操作

import * actionCreators from './actions';
import { bindActionCreators } from 'redux';

在此了解有关bindActionCreators的更多信息

这将导入您在那里创建的所有导出ActionCreator。
在我看来，您不再需要
successFetching
和
failureFetching
，因为您可以在以后的传奇故事中分派此操作

然后在
mapDispatchToProps
中，您需要注册此actioncreator

function mapDispatchToProps(dispatch) {
    return {
        ...bindActionCreators(actionCreators, dispatch),
    };
}

那么关于你的传奇，我想在这里也指出一些问题。
首先是你的功能

export default function* NewsListSaga() {
    yield takeLatest(NEWS_FETCH_SUCCESS, getNews);
}

实际上是我们所称的
观察者
，它在发送某个动作时观察，在这个函数中，在调用
getNews
之前，您已经在等待
NEWS\u FETCH\u SUCCESS
，这是错误的，因为您首先要执行
获取
，然后才能知道它是失败的还是成功的，所以是的，这个函数应该是这样的

export default function* NewsListSaga() {
    yield takeLatest(NEWS_FETCH_LOADING, getNews);
}

export function* getNews() {
    const requestURL ='%MY_URL%';

    try {
        const req = yield call(request, requestURL);
        yield put({type: NEWS_FETCH_SUCCESS, req});
    } catch (err) {
        yield put({type: NEWS_FETCH_FAILED, err});
    }
}

这很简单，意味着您将
执行已调度的所有最新的
NEWS\u FETCH\u LOADING
操作，并将调用
getNews`

然后在
getNews
generator函数中，您可以这样做

export default function* NewsListSaga() {
    yield takeLatest(NEWS_FETCH_LOADING, getNews);
}

export function* getNews() {
    const requestURL ='%MY_URL%';

    try {
        const req = yield call(request, requestURL);
        yield put({type: NEWS_FETCH_SUCCESS, req});
    } catch (err) {
        yield put({type: NEWS_FETCH_FAILED, err});
    }
}

在这里

const req = yield call(request, requestURL);

您是说您将等待您调用的请求/服务的结果，这可能是一个承诺

在这里，这就是为什么您不再需要函数
successFetching
和
failureFetching
函数的原因，因为您可以这样做

收益put（{type:NEWS\u FETCH\u SUCCESS，req}）；

您现在必须执行的最后一个重要步骤是在
组件didmount（）中调用actionCreator

像这样

export default function* NewsListSaga() {
    yield takeLatest(NEWS_FETCH_LOADING, getNews);
}

export function* getNews() {
    const requestURL ='%MY_URL%';

    try {
        const req = yield call(request, requestURL);
        yield put({type: NEWS_FETCH_SUCCESS, req});
    } catch (err) {
        yield put({type: NEWS_FETCH_FAILED, err});
    }
}

componentDidMount() {
    const { preFetching } = this.props;
    preFetching();
}

您好@这里的问题是因为您发送了错误的东西，您必须将您的操作放入
mapDispatchToProps
中，并发送那些ActionCreator，而不是返回
生成器函数的saga，请检查我的答案：）您仍然在做错误的事情，当您在
mapDispatchToProps
上使用
bindActionCreators
时，您不再需要在
constructor
中绑定它，您只需在
道具中调用它即可。谢谢您的帮助。现在所有的工作。谢谢你的回答。我有一些问题。1.如何理解
actions.js
中的所有函数？2.在component
const{dispatch}=this.props中未定义。如何理解调用fetch我需要编写
dispatch（actionCreators.loadNews（））
如果需要need@AND您只需在操作中保留函数
preFetching
，并在组件内部调用它，就像这样
this.props.preFetching（）
注意，您可以使用“对象速记”来简化此过程
connect
支持的语法。只需将充满action creators的对象作为第二个参数直接传递，而不是编写实际的
mapDispatch
函数，例如：
export default connect（mapState，actionCreators）（MyComponent）。几乎没有一个好的理由来编写一个单独的
mapDispatch`函数。