Действие React-Redux не отправляется - PullRequest
Новая
       73

Действие React-Redux не отправляется

0 голосов
/ 29 мая 2020

Я разрабатываю приложение response-native / expo с node / express api и im с использованием redux в качестве диспетчера состояний. Когда я пытаюсь отправить действие redux, ничего не произошло, я не получаю никаких ошибок, но действие выполняется не отправка.Это не ошибка api, потому что когда я тестирую api с Postman, все работает нормально.

Это мой код действия для входа, и я знаю, что нет проблем с вызовом действия в компоненте, потому что я параметры журнала консоли, которые я передал в компонент и вижу правильные данные. 

export const loginUser = ({ email, password }) => async (dispatch) => {
  const config = {
    headers: {
      'Content-Type': 'application/json',
    },
  };
  const body = JSON.stringify({ email, password });
  console.log(body);
  try {
    const res = await axios.post(
      'http://urlToMyServer/api/auth',
      body,
      config
    );

    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data,
    });
    dispatch(loadUser());
  } catch (err) {
    const errors = err.response.data.errors;

    if (errors) {
      errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
    }
    dispatch({
      type: LOGIN_FAIL,
    });
  }
};
Вот что я получаю после попытки входа снимок экрана с консоли

И в моей реакции ничего не произошло собственный отладчик реагировать на снимок экрана собственного отладчика

В моем блоке try я также отправляю другое действие, называемое loadUser (), но с ним нет проблем, потому что даже когда я удаляю вызов действия из loginUser он все еще не работает

Примерно через 2-3 минуты после попытки отправки действия я получаю эту ошибку в консоли

* [Необработанное отклонение обещания: TypeError: Cannot read свойство 'data' of undefined] * store \ actions \ auth. js: 66: 50 в - node_modules \ регенератор-runtime \ runtime. js: 45: 39 в tryCatch - node_modules \ регенератор-runtime \ runtime. js: 274: 21 в invoke - ... еще 8 фреймов стека из внутренних компонентов фреймворка *

Заранее спасибо!

1 Ответ

0 голосов
/ 29 мая 2020

, когда вы делаете запрос через ax ios, ваш код будет продолжать отправку, пока ваш запрос еще не завершен. Попробуйте написать промежуточное ПО AsyncDispatch 

    const asyncDispatchMiddleware = (store) => (next) => (action) => {
  let syncActivityFinished = false;
  let actionQueue = [];

  function flushQueue() {
    actionQueue.forEach((a) => store.dispatch(a)); // flush queue
    actionQueue = [];
  }

  function asyncDispatch(asyncAction) {
    actionQueue = actionQueue.concat([asyncAction]);

    if (syncActivityFinished) {
      flushQueue();
    }
  }

  const actionWithAsyncDispatch = Object.assign({}, action, { asyncDispatch });

  next(actionWithAsyncDispatch);
  syncActivityFinished = true;
  flushQueue();
};
const store = createStore(rootReducer,
composeWithDevTools(
applyMiddleware(
asyncDispatchMiddleware)

));

затем после добавления этого промежуточного программного обеспечения к своим попробуйте следующий метод входа 

case actionTypes.LOGIN:
      login(userData).then((data) => {
    if (data.error) {
      action.asyncDispatch({
        type: actionTypes.ERROR,
        message: data.error,
      });
    } else {
      action.asyncDispatch({
        type: actionTypes.SUCCESS,
        user: data,
        message: "Logged successfully",
      });
    }
      });

- это ваша собственная формула запроса входа, например, я использую fetch 

const login = (DATA) => {
  return fetch(apiNames.serverDev + "/login", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    withCredentials: true,
    crossdomain: true,
    body: JSON.stringify(DATA),
  })
    .then((response) => {
      return response.json();
    })
    .catch((err) => console.log(err));
}
...