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

Question

У меня есть выпадающий список. В моей реализации я должен показать валюту, основанную на изменении местоположения, в раскрывающемся списке. Мои данные похожи на: [{mruCode: "1700", страна: "США", countryText: "США", разделение: "WORLDWIDE_INDUSTRIAL »валюта: "USD"} ....] . Если я выбираю США, в качестве метки будет отображаться доллар США. Я сделал до сих пор.

действие (загрузка данных):

export const loadData = () => {
  return (dispatch) => {
    return axios.get(serviceUrl)
    .then(response=>{
      dispatch(getLocationData(response.data.mruPreferences))
    })
    .catch(error=>{
      throw(error);
    });
  };
};

export const currencyLists = mruCode =>({
  type: CURRENCY_LIST,
  payload: mruCode
});

редуктор (данные о нагрузке)

case 'GET_DATA_SUCC':
           return{
               ...state,
               location:action.location
           }

case 'CURRENCY_LIST':
        let newState = Object.assign({}, state)
        let newCurrList = newState.location.filter((el) => el.mruCode === action.payload)
        return Object.assign({}, newState, {
            currList: newCurrList
        });

код компонента:

class LocationList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            isLoading:false,
        };

        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
      this.props.loadData();
    }

    handleChange(){
      this.props.currencyLists(mruCode);
    }

    render(){
      const{location}=this.props;
      console.log(this.props.currList);
      const _labels = store.getLabels();
        return(<div>
            <span className="btnElement_spacing">You are viewing pricing for </span> 
             <select id="toggleLocationName">
                                  {location.map(item =>
                   <option  key={item.id}  value={item} onClick={()=>this.handleChange(item.mruCode)}>{_labels[item.division]}</option>
                    )}
          </select> 
          <span className="btnElement_spacing"> in </span>
                  {this.props.currList.map((item,index)=><label id="toggle-currency" key ={index}>{item.currency}</label>)}
            </div>
             );
    }
}

const mapStateToProps = state => {
    return {
      location: state.locationRed.location,
      currList: state.locationRed.currList
    }
  }

  const mapDispatchToProps = dispatch => {
    return {
      loadData:()=>{dispatch(loadData())},
      currencyLists:(mruCode)=>{dispatch(currencyLists(mruCode))}
      }
    }


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

Теперь я получаю пустой currList. Как получить валюту из выбранного выпадающего списка

Answer 1

Имеет ли location в избыточном состоянии объект (ключ-значение карты) или массив?Потому что, если это Object, вы не можете использовать метод find, но вы должны использовать его следующим образом:

case 'CURRENCY_LIST':
        let cList = state.location[action.id]
          return{
              ...state,
              currList: cList
          };

Answer 2

case 'CURRENCY_LIST':
    // Use object.assign to create a new object from a source.
    let newState = Object.assign({}, state)
    // Filtering the result by the id that has to be equal to the one you 
    // passed to the action. 
    let newCurrList = newState.location.filter((el) => el.id === action.id)
    // Returning a copy of the updated state, passing a third parameter 
    // (second source), that specifies the new value of currentList
    return Object.assign({}, newState, {
        currList: newCurrList
    })

Я использую object.assign, чтобы соблюдать одно из правил Redux, то есть не изменять напрямую состояние.

Здесь вы можете найти документдля метода Object.assign

Answer 3

Когда handleChange запущен, что является значением selectedOption?