Открыть модальный компонент при отправке сообщения - PullRequest
Новая
       6

Открыть модальный компонент при отправке сообщения

0 голосов
/ 07 октября 2019

У меня есть функция onSubmit с сообщением axios, которая позволяет зарегистрировать пользователя.

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

У меня уже есть компонент модала, созданный с помощью redux, но я не знаю, как интегрировать его в этот Axios

Axios Post 

const onSubmit = async function onSubmit(values) {
    axios({
        method: 'POST',
        url: 'http://localhost:4242/registerUser',
        data: values,
        headers: { 'Content-Type': 'application/json' },
    })
        .then((res) => {
            localStorage.setItem("token", res.headers["x-access-token"])

        })
        .catch(function (erreur) {
            console.log(erreur);
        })
}

Модальный редуктор 

export const registerModal = id => ({
  type: "REGISTER_MODAL",
  id
});

export const showModal = id => ({
  type: "SHOW_MODAL",
  id
});

export const hideModal = id => ({
  type: "HIDE_MODAL",
  id
});

const initialState = {
  // modals: []
  modals: {}
};

const modals = (state = initialState, action) => {
  switch (action.type) {
    case "REGISTER_MODAL":
      const newModal = {
        id: action.id,
        visible: false
      };
      return {
        ...state,
        modals: { ...state.modals, [action.id]: newModal }
      };
    case "SHOW_MODAL":
      return {
        ...state,
        modals: {
          ...state.modals,
          [action.id]: { ...state.modals[action.id], visible: true }
        }
      };
    case "HIDE_MODAL":
      return {
        ...state,
        modals: {
          ...state.modals,
          [action.id]: { ...state.modals[action.id], visible: false }
        }
      };
    default:
      return state;
  }
};

export default combineReducers({
  modals
});

1 Ответ

0 голосов
/ 07 октября 2019

Хорошо, если я правильно понял, вы хотите открыть модал после того, как сообщение было получено. Поэтому я бы попытался поместить действие открытого модала в метод then запроса o: 

const onSubmit = async function onSubmit(values) {
    axios({
        method: 'POST',
        url: 'http://localhost:4242/registerUser',
        data: values,
        headers: { 'Content-Type': 'application/json' },
    })
        .then((res) => {
            localStorage.setItem("token", res.headers["x-access-token"])
            // Here you are sure that your post was successfull I think...
            // The issue here will be to get the res and the dispatcher function, this will vary for the pattern that you are following 
           modalReducer.showModal( res.id );
        })
        .catch(function (erreur) {
            console.log(erreur);
        })
}

Вещь, которую я не могу решить, это как вы используете редуктор внутри компонента, который обрабатывает ваше сообщение. Вы передаете идентификатор? или идентификатор уже существует в компоненте?

...