React-Redux, How to set global state before new component is rendered?

Question

I am currently learning react-redux and I am attempting to update the global state with an array that is fetched from an API. When the onClick event is fired the page renders the new component before the global state can be set. When NavLink is set to '#' the state is able to be set. How could I have redux populate the state before rendering the new component?

My main objective is to pass the fetched array to a different component to display the fetched information.

COMPONENT

function Selector(props) {
  const [alcoholCategory, setAlcoholCategory] = useState([]);

useEffect(() => {
    props.handleCategorySelection(alcoholCategory);
  });

  function handleImagePress(alc) {
    fetch(`https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${alc}
    `)
      .then((r) => r.json())
      .then((result) => setAlcoholCategory(result.drinks))
      .then(props.handleCategorySelection(alcoholCategory));
  }
  console.log(alcoholCategory);
  return (
    
      
        
           handleImagePress("Vodka")}>
            
          
          Vodka
        

           handleImagePress("Rum")}>
            
          
          Rum
        
        
           handleImagePress("Tequila")}>
            
          
          Tequila
        
      
    
  );
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleCategorySelection: (drinks) =>
      dispatch({ type: "DRINK_LIST", drinkArray: drinks }),
  };
};
export default connect(null, mapDispatchToProps)(Selector);

REDUCER

const initialState = { drinkList: [] };

const alcoholCategory = (state = initialState, action) => {
  switch (action.type) {
    case "DRINK_LIST":
      return {
        ...state,
        drinkList: state.drinkList.concat(action.drinkArray),
      };
  }
};

export default alcoholCategory;

user_12364678 · Answer

You could conditionally render the new component around the store property it is dependent on.

Parent Component:

import React from 'react';
import {connect} from 'redux';
import anyActionYouNeed from '../actions/anyActionYouNeed'

const mapStateToProps = state => {
  return {
    drinkList: state.drinkList,
  }
}

const mapDispatchToProps = {
  anyActionYouNeed
}

//drinkList.length > 0 in your case
let Parent = ({drinkList, anyActionYouNeed}) => {
  return(
    
      {drinkList.length > 0 && }
    
  )
}

Parent = connect(
  mapStateToProps,
  mapDispatchToProps
)(Parent)

export default Parent

React-Redux, How to set global state before new component is rendered?

1 Answers