get the currency value based on selected location from dropdownlist reactjs -redux

Question

I have a location dropdownlist. In my implementation, i have to show the currency based on location change in dropdownlist. My data is like : [{mruCode: "1700", country: "US", countryText: "United States", division: "WORLDWIDE_INDUSTRIAL",currency:"USD"}....] . If i am choosing the US it will show the USD as a label. I have done so far.

action(load data):

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
});

reducer (load data)

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
        });

component code:

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);

Now, I am getting empty currList. How to get the currency from selected dropdownlist

Answer 1

触发handleChange时， selectedOption的值是多少？

Answer 2

Does location on redux state is an Object(Map key-value) or an Array? Because if it is an Object you can't use the find method, but you should use it like:

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

Answer 3

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
    })

I'm using object.assign, to respect one of the rules of Redux, that is to not change directly the state.

Here you can find the doc for Object.assign method