CODEWITHSUNDEEP
javascriptreactjs
Red Baron
Red Baron

Reputation: 7652

React component not updating when redux state is updating

I am firing an action to do some toggle functionality, however, my react component is not re rendering even though the redux state is

const Countries = ({ countries, toggleCountry }) => (
  <div>
    <h4> All Countries </h4>
    <div className="container">
      {countries.map((country, index) => (
        <div
          key={index}
          className={`countryContainer ${country.visited ? 'visited' : ''}`}
        >
          <img src={country.flag} alt="countryFlag" />
          <p className="countryName"> {country.name} </p>
          <button onClick={() => toggleCountry(country.name)}>
            {country.visited ? 'undo' : 'visited'}
          </button>
        </div>
      ))}
    </div>
  </div>
);

const mapStateToProps = ({ countries }) => ({
  countries
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      toggleCountry
    },
    dispatch
  );

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

when I click this button it is correctly toggling in the redux state but the component does not re render to show the new button label or change the class name

this is my reducer:

const initialState = []

export default(state = initialState, action) => {
  switch(action.type){
    case 'UPDATE_INITIAL_COUNTRIES':
      return state.concat(action.countries)
    case 'UPDATE_COUNTRY_VISITED':
      return state.map(country => (
        country.name === action.name ? {...country, visited: !country.visited} : country
      ))
    default:
      return state;
  }
}

and my action creator

export const toggleCountry = countryName => {
  return dispatch => {
    dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
  }
}

Upvotes: 0

Views: 103

Answers (2)

Shubham Jat
Shubham Jat

Reputation: 1

Here country.name === action.name ? {...country, visited: !country.visited} : country you are searching for action.name but in below declaration you have not given payload a proper name

export const toggleCountry = countryName => {
      return dispatch => {
        dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
      }
    }

Fix:

export const toggleCountry = countryName => {
      return dispatch => {
        dispatch({ type: 'UPDATE_COUNTRY_VISITED', name :countryName })
      }
    }

Upvotes: 0

Danyal Imran
Danyal Imran

Reputation: 2605

The action expects action.name, but instead receives action.countryName

The problem is here

export const toggleCountry = countryName => {
  return dispatch => {
    dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
  }
}

fix:

export const toggleCountry = name => {
  return dispatch => {
    dispatch({ type: 'UPDATE_COUNTRY_VISITED', name })
  }
}

Upvotes: 2

Related Questions