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

Question

我绝对是React Native，Redux和朋友的初学者。
现在，我尝试使用React Native和Redux创建一个应用程序。
在此过程中，我发现此错误：

我尝试像这样在我的应用程序中使用Redux：

 export const confirmRegister = (userdata) => { return (dispatch) => { return( fetch(URI + path, { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', 'x-application-id' : AppId, 'hashing' : this.generateHashing(userdata) }, body: userdata, }) .then((response) => { return response.json() }) .then((response)=>{ dispatch(setDataAfterRegister(response.result)) }) .catch(error => {alert(error)}) ) }; }; export function setDataAfterRegister(data){ return{ type:'REGISTERED', name:data.name, token:data.access_token } } 

我仍在学习如何使用Redux。
任何帮助将不胜感激。

这是我的商店：

 import { createStore } from 'redux'; import rootReducer from './reducers'; let store = createStore(rootReducer); export default store; 

Answer 1

confirmRegister函数返回一个函数：

export const confirmRegister = (userdata) => {
  return (dispatch) => {

Redux不知道如何本地处理。 您需要一个中间件来做到这一点。 允许您从动作创建者返回函数的最受欢迎的中间件是redux-thunk 。

首先安装它：

npm install --save redux-thunk

然后设置中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

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

Answer 2

您的动作创建者confirmRegister返回一个函数，但是在React动作创建者中返回一个纯JS对象的动作。

因此，您需要一些中间件来告知有关此异步调用的响应。 您可以使用Redux-thunk ， redux-Sagas和其他中间件。 这将使您的动作创建者返回一个函数，并且该函数在获得响应时将调度一个新的动作对象。

您可以使用npm或yarn安装中间件

npm install --save redux-thunk
yarn add redux-thunk

将其添加到您的商店配置文件。

对于该Warning:Cannot update during an existing state transition您必须在ComponentWillReceiveProps或ComponentWillMount中设置ComponentWillReceiveProps Warning:Cannot update during an existing state transition 。 您可能正在render方法中设置状态。 `