Действия должны быть простыми объектами.Использовать пользовательское промежуточное ПО для асинхронных действий 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 возвращает функцию, но в 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.Вы, вероятно, устанавливаете состояние в методе render.`

Answer 2

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)
);