Использовать хранилище Redux в качестве входных данных для вызова Post API - PullRequest
Новая
       6

Использовать хранилище Redux в качестве входных данных для вызова Post API

0 голосов
/ 28 января 2020

Я создал интерфейс ввода в React и сохранил данные в состоянии Redux.

Затем я создал новое действие для вызова Post API. Если параметр «data» является константой (которую я создал в качестве теста), все работает нормально.

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

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

import axios from 'axios';

export const show_query_action = () => {
  return dispatch => {
    dispatch(show_query_started_action());
    axios({
      method: 'post',
      url:'http://127.0.0.1:5000/show_query',
      data: this.props.reducer_components
    })
      .then(res => {
        dispatch(show_query_success_action(res));
      })
      .catch(err => {
        dispatch(show_query_failure_action(err.message));
      });
  };
};

const show_query_started_action = () => ({
  type: 'ADD_SHOW_QUERY_STARTED'
});

const show_query_success_action = todo => ({
  type: 'ADD_SHOW_QUERY_SUCCESS',
  payload: {
    ...todo
  }
});

const show_query_failure_action = error => ({
  type: 'ADD_SHOW_QUERY_FAILURE',
  payload: {
    error
  }
});

1 Ответ

1 голос
/ 28 января 2020

Если он должен вызываться с другими параметрами из компонента React, вы можете поместить параметр данных в качестве параметра вашему создателю действия: 

export const show_query_action = (data) => {
  return dispatch => {
    dispatch(show_query_started_action());
    axios({
      method: 'post',
      url:'http://127.0.0.1:5000/show_query',
      data: data
    })

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

export const show_query_action = () => {
  return (dispatch, getState) => {
    const data = getState().data; -> you would specify in wich part of the state your data lives, this is just an example
    dispatch(show_query_started_action());
    axios({
      method: 'post',
      url:'http://127.0.0.1:5000/show_query',
      data: data
    })

Надеюсь, это поможет.

...