Как передать аргумент от компонента к редуксному действию - PullRequest
Новая
       97

Как передать аргумент от компонента к редуксному действию

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

Я пытаюсь передать название страны действию в Redux из компонента React, но когда оно появляется в создателе действия, оно становится неопределенным. Я думаю, что это как-то связано с разделом mapDispatchToProps () под компонентом, но я новичок в Redux, поэтому я не совсем уверен.

Он получает список стран из API, но потом, когда Я хочу передать выбранную страну обратно в Действия. js страна становится неопределенной.

Компонент. js

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import {
  getCountryCasesAction,
  getAllAvailableCountriesAction,
} from "../redux/Actions";

import { Form } from "semantic-ui-react";

function CasesByCountry({
  countryOptions,
  getAllAvailableCountries,
  getCountryCases,
}) {
  useEffect(() => {
    getAllAvailableCountries();
  }, [getAllAvailableCountries]);

  const onDropdownOptionSelect = (e, result, country, countryData) => {
    console.log(result.value);
    getCountryCases(result.value);
  };

  return (
    <div>
      <Form.Dropdown
        placeholder="Select Country"
        fluid
        selection
        search
        onChange={onDropdownOptionSelect}
        options={
          countryOptions &&
          countryOptions.map((c) => {
            return {
              key: c.ISO2,
              text: c.Country,
              value: c.Country,
            };
          })
        }
      />
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    countryOptions: state.data,
    countryData: state.data,
  };
};

const mapDispatchToProps = {
  getAllAvailableCountries: getAllAvailableCountriesAction,
  getCountryCases: getCountryCasesAction,
};

export default connect(mapStateToProps, mapDispatchToProps)(CasesByCountry);

Действия. js

import axios from "axios";

export const GET_WORLDWIDE_SUMMARY = "GET_WORLDWIDE_SUMMARY";
export const GET_COUNTRY_CASES = "GET_COUNTRY_CASES";
export const GET_ALL_AVAILABLE_COUNTRIES = "GET_ALL_COUNTRIES";

export const getWorldwideSummaryAction = () => async (dispatch, getState) => {
  // const response = await axios
  //   .get
  //   // "https://cors-anywhere.herokuapp.com/" +
  //   // "process.env.REACT_APP_GET_WORLDWIDE_SUMMARY"
  //   ();
  // console.log(response);
  // return dispatch({
  //   type: GET_WORLDWIDE_SUMMARY,
  //   payload: response.data,
  // });
};

export const getAllAvailableCountriesAction = () => async (
  dispatch,
  getState
) => {
  const response = await axios.get("https://api.covid19api.com/countries");
  console.log(response);

  return dispatch({
    type: GET_ALL_AVAILABLE_COUNTRIES,
    payload: response.data,
  });
};

export const getCountryCasesAction = () => async (
  dispatch,
  getState,
  country
) => {
  console.log("getCountryCasesAction");
  const response = await axios.get(
    `https://api.covid19api.com/dayone/country/${country}/status/confirmed`
  );
  console.log(response);
  return dispatch({
    type: GET_COUNTRY_CASES,
    payload: response.data,
  });
};

Редуктор. js

import {
  GET_WORLDWIDE_SUMMARY,
  GET_ALL_AVAILABLE_COUNTRIES,
  GET_COUNTRY_CASES,
} from "./Actions";

const initialState = {
  data: "",
};

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_WORLDWIDE_SUMMARY:
      console.log(action.payload);
      return {
        ...state,
        data: action.payload,
      };

    case GET_ALL_AVAILABLE_COUNTRIES:
      console.log(action.payload);
      return {
        ...state,
        data: action.payload,
      };

    case GET_COUNTRY_CASES:
      console.log(action.payload);
      return {
        ...state,
        data: action.payload,
      };

    default:
      return state;
  }
};

Ответы [ 2 ]

1 голос
/ 13 апреля 2020

Можете ли вы попробовать отправить свое действие следующим образом? 

//actions.js
export const getCountryCasesAction = (country) => async (
  dispatch,
  getState
) => {
  const response = await axios.get(
    `https://api.covid19api.com/dayone/country/${country}/status/confirmed`
  );
  console.log("CountryCaseAction", response);
  return dispatch({
    type: GET_COUNTRY_CASES,
    payload: response.data,
  });
};

//CasesByCountry.js
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  getCountryCasesAction,
  getAllAvailableCountriesAction,
} from "../redux/Actions";

import { Form } from "semantic-ui-react";

function CasesByCountry() {
  const dispatch = useDispatch();
  const availableCountries = useSelector((state) => state.availableCountries);
  const countryCases = useSelector((state) => state.countryCases);

  useEffect(() => {
    dispatch(getAllAvailableCountriesAction());
  }, [dispatch]);

  const optionForCountries =
    availableCountries &&
    availableCountries.map((country) => {
      return {
        key: country.ISO2,
        text: country.Country,
        value: country.Country,
      };
    });

  console.log(countryCases);

  return (
    <div>
      <Form.Dropdown
        placeholder="Select Country"
        fluid
        selection
        search
        onChange={(result, e) => dispatch(getCountryCasesAction(e.value))}
        options={optionForCountries}
      />
    </div>
  );
}

export default CasesByCountry;



//reducer.js
import {
  GET_WORLDWIDE_SUMMARY,
  GET_ALL_AVAILABLE_COUNTRIES,
  GET_COUNTRY_CASES,
} from "./Actions";

const initialState = {
  data: "",
  availableCountries: "",
  countryCases: "",
};

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_WORLDWIDE_SUMMARY:
      return {
        ...state,
        data: action.payload,
      };

    case GET_ALL_AVAILABLE_COUNTRIES:
      return {
        ...state,
        availableCountries: action.payload,
      };

    case GET_COUNTRY_CASES:
      return {
        ...state,
        countryCases: action.payload,
      };

    default:
      return state;
  }
};
0 голосов
/ 13 апреля 2020

Кажется, вы неправильно указали свойство страны.

Я внес несколько изменений в CaseByCountry. js file 

...

  return (
    <div>
      <Form.Dropdown
        placeholder="Select Country"
        fluid
        selection
        search
        onChange={(result, e) => getCountryCases(e.value)}
        //{(result) => dispatch(getCountryCases(result.value))}
        options={
          countryOptions &&
          countryOptions.map((c) => {
            return {
              key: c.ISO2,
              text: c.Country,
              value: c.Country,
            };
          })
        }
      />
    </div>
  );
}
 ...

const mapDispatchToProps = (dispatch) => ({
  getAllAvailableCountries: () => dispatch(getAllAvailableCountriesAction),
  getCountryCases: country => dispatch(getCountryCasesAction(country)),
});

Также внесены изменения в действиях. js file 

export const getCountryCasesAction = (country) => async (
  dispatch,
  getState
) => {
  console.log("getCountryCasesAction", country);
  const response = await axios.get(
    `https://api.covid19api.com/dayone/country/${country}/status/confirmed`
  );
  console.log(response);
  return dispatch({
    type: GET_COUNTRY_CASES,
    payload: response.data,
  });
};

Страна больше не определена. Но происходит новая ошибка. Поскольку это не входит в суть вопроса, я просто оставил его в покое.

Обратите внимание, что я скопировал только ту часть, в которую внес изменения.

...