Разберитесь с работой рассылки с вызовом asyn c - PullRequest
Новая
       13

Разберитесь с работой рассылки с вызовом asyn c

0 голосов
/ 25 апреля 2020

Я создаю простое реагирующее приложение с использованием Context-Provider и редукторов. В моем коде, когда я нажимаю кнопку входа на экране, он вызывает метод callApi, который вызывает бэкэнд, а также должен установить token в TOKEN NOT LOADED, а затем, если вызовы API возвращают ошибку, он вызывает действие add_error в редукторе. -> который устанавливает значение от token до TOKEN LOADING ERROR, но когда у меня есть точка останова в add_error, значение token в действии callApi никогда не устанавливается. Я не уверен, что происходит. Правильный ли этот способ программирования? 

const testReducer = (state, action) => {
  switch (action.type) {

   case "callApi":
      api(action.payload.dispatch);
      console.log("callApi action");
      return { ...state, errorMessage: "", token: "TOKEN NOT LOADED" };
    case "add_error":
        console.log("add_error action");
      return { ...state, errorMessage: action.payload, token: "TOKEN LOADING ERROR"  };
    default:
      return state;
  }
};

const callApi = dispatch => async () => {
    dispatch({
        type: "callApi",
        payload: {dispatch}
      })
};

const api = async (dispatch) => {
    try {

      const response = await apiServer.post("/vendor/signin", {
        username : "asdasd",
        password : "asdsd dad",
        "g-recaptcha-response": "asdsd"
      });
      if (response.data.status === "success") {
        console.log("Sign in Success");
      } else {
       console.log("Sign in Error");
       dispatch({
        type: "add_error",
        payload: "Something went wrong with signin"
      });
      }
    } catch (err) {
      dispatch({
        type: "add_error",
        payload: "Something went wrong with signin"
      });
    }
  };

  export const { Provider, Context } = createDataContext(
    testReducer,
    { callApi },
    { errorMessage: "", token: null }
  );

================================= ============================================

createDataContext.js

import React, { useReducer } from 'react';

export default (reducer, actions, defaultValue) => {
    const Context = React.createContext();

    const Provider = ({ children }) => {
        const [state, dispatch] = useReducer(reducer, defaultValue);

        const boundActions = {};
        for (let key in actions) {
            boundActions[key] = actions[key](dispatch);
        }
        return (
            <Context.Provider value={{ state, ...boundActions }}>
                {children}
            </Context.Provider>
        );
    };

    return { Context, Provider}
};
...