动作必须是普通对象。使用自定义中间件进行异步操作 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

你的 Action creator confirmRegister 返回一个函数，但在 React 中 action creator 返回一个普通 JS 对象的 action。

所以你需要一些中间件来告诉 react 这个异步调用。 可以使用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 中设置组件的状态。您可能正在render 方法中设置状态。 `