How to update dropdown list field based on another dropdown list in reactjs redux

Question

I'm completely new to coding in reactjs and I'm using MERN stack and still trying to understand redux store. So basic functions I understand but let's say I have a country and city dropdown lists, how can I approach this using actions, reducers, and the component?

Answer 1

I would have the redux state look like this:

{
   countries: {
      "USA": ["New York", "Los Angeles", ...],
      "United Kingdom": ["London", "Manchester", ...],
   },
   selectedCountry: "USA"
}

Then you can have some code that extracts the list of cities based on the selectedCountry, and an action that changes the selectedCountry based on the onChange of a Select element.