动作必须是普通对象。使用自定义中间件进行异步操作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动作中，creator返回一个普通JS对象的动作。

所以你需要一些中间件来对这个异步调用做出反应。 您可以使用Redux-thunk，redux-Sagas和其他中间件。 这将让你的动作创建者返回一个函数，并且获取响应的函数将调度一个新的动作对象。

您可以使用npm或yarn

安装middlerware

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

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

为此Warning:Cannot update during an existing state transition 您必须在ComponentWillReceiveProps或ComponentWillMount中设置组件的状态。您可能正在使用render方法设置状态。 `