React - Redux State update but not rendered in the component

Question

I have a component Details.js where i am populating teams from 4 Leagues in a Select Dropdown

Depending on the team selected the states in State.js component are updated

The problem is that depending from the team selected, sometimes the state is rendered in State.js and sometimes no.

There are not errors in the console and in the redux tool the states are updated correctly.

I am using https://www.api-football.com/ to consume the data.

Here the relevant code

In the reducers/index.js i have created an initial state

RECEIVE_LEAGUE
  league:[],

case RECEIVE_LEAGUE:
  return {...state, leagueId: action.json};

In the actions/index.js

export const receivedLeague = json => ({
  type: RECEIVE_LEAGUE,
  json: json
});

I have added a dispatch in the getTeamsDetailById(id)

dispatch(receivedLeague(id));

In the Details.js component

I have added the state leagueId on top

and edited my selectTeamStat function

  const [selectedOption, setSelectedOption] = useState('');

  const selectTeamStat = (evt) => {
     const { value } = evt.target;
     setSelectedOption(value)
     getStats(leagueId, value);
  };

I have provided the demo in codesandbox reproducing the case here ( It is necessary to use Google Chrome extension CORS Unblock to see or any other extension unblocking the CORS )

To reproduce the case for example select Flamengo in Serie A and the state is updated and not rendered in the component but if you select Botafogo it is rendered. Why?

first of all what was the intention of keeping the stats in the redux state and the component state of the Stats-Component. In my optinion you can remove all local states of the Stats-Component and also all useEffect hooks. — Flui, Mar 17 '20 at 13:06
Because the function getstast takes 2 parameters the leagueId and teamId — Koala7, Mar 17 '20 at 13:11
But the main issue is what you expect from your condition `if ( teamsStatsWinHome && teamsStatsWinAway && teamsStatsDrawHome && teamsStatsDrawAway && teamsStatsLoseHome && teamsStatsLoseAway )` this is false if any of those variables is null, undefined, false, '0' or 0 (see: [loose equality](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#A_model_for_understanding_equality_comparisons) ) — Flui, Mar 17 '20 at 13:29
You are right, if you want to put the answer with the correct condition i accept the answer — Koala7, Mar 17 '20 at 13:50
Are you using redux thunk ? actually it is asynchrous by default so this maybe happened because of thunk . use redux saga instead — Vivek Anand, Mar 18 '20 at 16:01

score 1 · Accepted Answer · answered Mar 18 '20 at 15:53

1

if (
  teamsStatsWinHome !== null && // maybe you also need to add `typeof object === 'undefined'`
  teamsStatsWinAway !== null &&
  teamsStatsDrawHome !== null &&
  teamsStatsDrawAway !== null &&
  teamsStatsLoseHome !== null &&
  teamsStatsLoseAway !== null
)

to avoid repetition you can also use but maybe the first way is easier to read

const isNullOrUndefined = (object) => object === null || typeof object === 'undefined';

if(![
  teamsStatsWinHome,
  teamsStatsWinAway,
  teamsStatsDrawHome,
  teamsStatsDrawAway,
  teamsStatsLoseHome,
  teamsStatsLoseAway,
].some(isNullOrUndefined))

answered Mar 18 '20 at 15:53

Flui

146
6

I have used typeof teamsStatsDrawAway == "number" for all and it works, i basically check if it is a number, i am not sure now whats is the best condition now – Koala7 Mar 18 '20 at 16:57
this should be fine as well. – Flui Mar 18 '20 at 19:07

React - Redux State update but not rendered in the component

1 Answers1