Я использую redux для управления состоянием своего приложения, я все еще новичок в использовании redux.

reducer.js

 const initialState = {
  country: "Indonesia",
  countryName: [],
  countryConfirmed: 0,
  countryRecovered: 0,
  countryDeath: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_COUNTRY_NAME: {
      return {
        ...state,
        countryName: action.payload
      }
    }

    case GET_SELECTED_COUNTRY: {
      return {
        ...state,
        countryConfirmed: action.payload.countryConfirmed,
        countryRecovered: action.payload.countryRecovered,
        countryDeath: action.payload.countryDeath,
      }
    }

    case GET_PICK_COUNTRY: {
      return{
        ...state,
        country: action.payload
      }
    }

    default:
      return state;
  }
}

export default reducer;
 

action.js

 export const getCountryName = (countryName) => {
  return {
    type: GET_COUNTRY_NAME,
    payload: countryName
  }
}

export const getCasesSelectedCountry = (confirmed, recovered, death) => {
  return {
    type: GET_SELECTED_COUNTRY,
    payload: {
      countryConfirmed: confirmed,
      countryRecovered: recovered,
      countryDeath: death,
    }
  }
}

export const getSelectedCountry = (country) => {
  return {
    type: GET_PICK_COUNTRY,
    payload: country
  }
}
 

Файл Action creator для извлечения данных api

fetchDataAPI.js

 export const getFetchCountryName = () => (dispatch) => {
  return (
    axios.get("https://covid19.mathdro.id/api/countries").then((result) => {
      let datas = result.data.countries;
      let name = [];
      datas.forEach((record) => {
        name.push(record.name);
      })

      dispatch({
        type: GET_COUNTRY_NAME,
        payload: name
      })
    })
      .catch((err) => {
        console.log(err);
      })
  )
}

export const getFetchCasesSelectedCountry = (country) => async (dispatch) => {
  await axios.get(`https://covid19.mathdro.id/api/countries/${country}`).then((result) => {
    let confirmed = result.data.confirmed.value;
    let recovered = result.data.recovered.value;
    let death = result.data.deaths.value;

    dispatch({
      type: GET_SELECTED_COUNTRY,
      payload: {
        countryConfirmed: confirmed,
        countryRecovered: recovered,
        countryDeath: death,
      }
    })
  })
    .catch((err) => {
      console.log("error message ", err);
    })

}
 

Здесь у меня есть форма, где значение должно быть в getFetchCasesSelectedCountry, которое вызывается с помощью ${country}

 import React from "react";
import "./style.css";
import { Form,Input } from "reactstrap";
import "../../Pages/style.css";
import { useDispatch, useSelector } from "react-redux";
import { getFetchCasesSelectedCountry, getFetchCountryName } from "../../redux/fetchDataAPI";

export default function DataCharts() {
  const countryState = useSelector(state => state)
  const dispatch = useDispatch();

  React.useEffect(() => {
    showAllCountry();
    pickCountry();

  }, [countryState.country]);

  const showAllCountry = (countryName) => {
    dispatch(getFetchCountryName(countryName))
  };

  const pickCountry = (confirmed, recovered, death) => {
    dispatch(getFetchCasesSelectedCountry(confirmed, recovered, death))
  };

  function handleChange() {
    pickCountry(countryState.country);
  }

  return (
    <>
      <div style={{ width: "30%", justifyContent: "center", margin: "2rem auto" }}>
        {/* THIS IS THE FORM */}
        <Form>
          <Input
            style={{ cursor: "pointer" }}
            type="select"
            name="selected"
            onChange={(e) => handleChange(e.target.value)}
            value={countryState.country}
          >
            {countryState.countryName.map((item, index) => (
              <option key={index} value={item}>
                {item}
              </option>
            ))}
          </Input>
        </Form>
      </div>
    </>
  );
}
 

Как я могу перенести значение формы в мой файл redux action creator? Извините, если мой вопрос трудно понять.

pickCountry использует 3 аргумента: confirmed , recovered , и death . Они передаются дальше getFetchCasesSelectedCountry . Вы переходите только countryState.country к pickCountry though. Кроме того, вы никогда не используете новое значение selected / onChange из Input . Я думаю, что это работает, хотя, поскольку getFetchCasesSelectedCountry потребляет один аргумент, country .

Проблема

Проблема, по-видимому, просто в том, что выбранное значение страны не используется в функции handleChange обратного вызова и не передается pickCountry .

Решение

Обновите handleChange , чтобы использовать onChange событие и переслать значение страны.

 function handleChange(event) {
  const { value } = event.target; // <-- destructure value from event here
  pickCountry(value);
}

...

<Input
  style={{ cursor: "pointer" }}
  type="select"
  name="selected"
  onChange={handleChange} // <-- just attach handler
  value={countryState.country}
>
  {countryState.countryName.map((item, index) => (
    <option key={index} value={item}>
      {item}
    </option>
  ))}
</Input>
 

Пока код улучшается / исправляется, можно также исправить другую проблему с pickCountry помощью and getFetchCasesSelectedCountry .

 const pickCountry = (country) => {
  dispatch(getFetchCasesSelectedCountry(country))
};