Как добавить параметр из состояния к действию asyn c в redux?

Question

Мне нужно передать и params асин c действие. Параметр - это значение searchField, которое имеет отдельное действие и редуктор. Мне нужно передать параметр, потому что он является частью URL для вызова извлечения, который я делаю. Вот код из действий, уменьшений и файлов приложения. js:

Действия. js:

export const setSearchField = text => {
  return {
    type: CHANGE_SEARCH_FIELD,
    payload: text
  };
};

export const requestMeal = () => dispatch => {
  const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=asd`
  dispatch({ type: REQUEST_MEAL_PENDING });
  fetch(url)
    .then(resp => resp.json())
    .then(data => {
      console.log(url);
      dispatch({ type: REQUEST_MEAL_SUCCESS, payload: data.meals });
    })
    .catch(err => dispatch({ type: REQUEST_MEAL_FAILED, payload: err }));
};

Редукторы. js:

const initalStateSearch = {
  searchField: ""
};

export const searchMeals = (state = initalStateSearch, action = {}) => {
  switch (action.type) {
    case CHANGE_SEARCH_FIELD:
      return Object.assign({}, state, { searchField: action.payload });
    default:
      return state;
  }
};
/////////

// reducer and initia; state for requestMeal action

const initalStateRequestMeal = {
  isPending: false,
  meals: [],
  error: ""
};

export const requestMeal = (state = initalStateRequestMeal, action = {}) => {
  switch (action.type) {
    case REQUEST_MEAL_PENDING:
      return Object.assign({}, state, { isPending: true });
    case REQUEST_MEAL_SUCCESS:
      return Object.assign({}, state, {
        isPending: false,
        meals: action.payload
      });
    case REQUEST_MEAL_FAILED:
      return Object.assign({}, state, {
        isPending: false,
        error: action.error
      });
    default:
      return state;
  }
};

Приложение. js

const mapStateToPros = state => {
  return {
    searchField: state.searchMeals.searchField,
    meals: state.requestMeal.meals,
    isPending: state.requestRandomMeal.isPending,
    error: state.requestRandomMeal.error,
    meal: state.requestViewMeal.meal
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onSearchChange: event => dispatch(setSearchField(event.target.value)),
    onRequestMeal: () => dispatch(requestMeal()),
    onRequestRandomMeal: () => dispatch(requestRandomMeal()),
    onRequestViewMeal: event =>
      dispatch(requestViewMeal(event.target.getAttribute("data-id")))
  };
};

Мне нужно перейти к onRequestMeal() параметрам searchField, которые приходят в состояние от другого действия onSearchChange().

Спасибо

Answer 1

Не уверен, используете ли вы саксофон редукса или нет, но, тем не менее, вы должны иметь возможность отправлять значение ввода вместе с действием. Вы должны были опубликовать свой код, а не pastebin :) Так что ваш создатель действий будет выглядеть примерно так:

export const searchRequest = (term) => ({ type: SEARCH_REQUEST_START, term, });

, если у вас есть действие SEARCH_REQUEST_START, конечно:)

и затем из вашего компонента вы можете просто отправить что-то вроде

const search = (event) => { dispatch(searchRequest(event.target.value)); };

, и независимо от того, используете ли вы сагу или нет, вы должны иметь доступное входное значение в вашей функции получения или редуктора, через action

Надеюсь, это поможет. Добро пожаловать в Переполнение стека:)