0

I've three buttons on the page, and when clicking on any button i want to get that selected value from the store filtered by id(done in reducer). I'm trying to use redux with mapStateToProps and mapDispatchToProps pattern, but looks like when i try to access the current selected value from the store after clicking on any button, it doesn't reflect the correct value in the console. Is this not how "this.props.anyPropValue" be used? Can you help clarify what's wrong in my example? First time it prints default value when clicking any button, clicking again prints the previously clicked button value not the current one.

Here is a sandbox link to the simple app i created for the above

sandbox link of the code

user212223
  • 1
  • 1
  • 3

1 Answers1

1

Most of the code that you have wrote is correct, If you are expecting to see the updated output right after calling the action, it won't work

onGetCountryById(id) {
    this.props.fetchCountryById(id);
    console.log(this.props.country); // This will gives you the current country (We just update the state, but still that value didn't update the component)
}

try to print the value of the country in the html as below and you will see it's getting updated

{this.props.country === null ? "default" : this.props.country.name}

in the reducer you might need to do this change

case CountryActions.FETCH_COUNTRY_BY_ID:
    return {
        ...state,
        country: state.countries.find((item) => item.id === action.id) // use find instead of filter
    };

and set the initial value of the country set to null

const initCountriesState = {
    country: null,
    countries: [
        ....
    ]
};

here is the updated sandbox

Kalhan.Toress
  • 21,683
  • 8
  • 68
  • 92
  • thanks for pointing out that html is getting uipdated, that's great! but as you mentioned if expecting the updated value of the prop, it's not possible ? so how shall i get the updated value in my click function? – user212223 Feb 28 '21 at 16:24
  • Have you checked the sandbox that i have attached, if you console.log right after the action it will not gives you the latest result, state will get updated may be in the next execution cycle (Updating state is asynchronous https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous), and your component will receive the latest state soon, very sooon, that's why you see the latest result in the browser right after the click without seen any noticeable delay – Kalhan.Toress Feb 28 '21 at 17:14
  • i did check the latest sandbox that you attached, as i click the button, console log prints null first and if i click again any button then it prints previously clicked button value, what i was hoping for is a way to get the value right away when i click any button, is that possible? – user212223 Feb 28 '21 at 17:24
  • i think i know for prop, it won't give you the updated value right away but i thought prop will give that value as it's stored a global store? – user212223 Feb 28 '21 at 17:25
  • First why do you need "value right away when i click any button"? And no state will update asynchronously means that it will not update right away by very very soon – Kalhan.Toress Feb 28 '21 at 18:40
  • The intention is to use the "updated value" in the button event to do other processing with the updated value, that's why i need the value right away – user212223 Feb 28 '21 at 19:25
  • What sort of processing? – Kalhan.Toress Mar 01 '21 at 03:24