title: The Component view does not get updated but the redux store is getting updated
body: <p>The issue is the dropdown components are not showing any options on the component view when loaded for the first time but shows up after reloading.I am getting the store data as a response from the store but the component is not getting the data.I have put console logs below, I am getting data from the console log of mapStateToProps,but I found empty array from the console log inside componentDidMount stating this.props.skills.Is there any issue with the code in reducer or the component?</p>
  
  <p>Below is the reducer:</p>
  
  <p>Skill Reducer:</p>
  
  <pre><code>const skillInitialState = {
      skillList: []
  }
  const skillReducer = (state = skillInitialState, action) =&gt; {
  
      switch (action.type) {
          case 'GET_SKILLS':
              console.log('the reducer state is ......$$$$$$$$$$$$ ', state)
              console.log('the skillsssss.....%%%%%%****', action.payload)
              return {
                  ...state,
                  skillList: action.payload
              }
  
          default:
              return state
      }
  
  }
  export default skillReducer
  </code></pre>
  
  <p>Below is the component:</p>
  
  <pre><code>import React from 'react';
  import Select from 'react-select';
  import { connect } from 'react-redux';
  import { startGetSkills, startGetEmployeeSkills } from "../../action/index.js";
  
  class MultiSelect extends React.Component {
      constructor() {
          super()
          this.state = {
              options: [],
              selectedOptions: [],
          }
      }
  
      componentDidMount() {
          const skillOptions = []
          this.props.startGetSkills()
          this.props.startGetEmployeeSkills()
  
          console.log('The skill options are .......', this.props.skills)
          this.props.skills.forEach((skill) =&gt; {
              console.log('The skills are ......', skill)
              skillOptions.push({
                  value: skill._id,
                  label: skill.skillName.charAt(0).toUpperCase() + skill.skillName.slice(1),
                  _id: skill._id
              })
          })
          this.setState({ options: skillOptions })
          this.setState({ selectedOptions: this.props.selectSkill })
      }
  
      render() {
          const { skills, heading, index } = this.props
          const { options } = this.state
          return (
              &lt;div&gt;
                  &lt;label&gt; {heading} &lt;/label&gt;
                  &lt;Select
                      isMulti={true}
                      defaultValue={this.props.selectSkill}
                      value={this.state.selectedOptions}
                      options={options}
                      onChange={(e) =&gt; {
                          this.setState({ selectedOptions: e })
                          this.props.handleSkillChange(e)
                      }}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          startGetSkills: () =&gt; {
              dispatch(startGetSkills())
          },
          startGetEmployeeSkills: () =&gt; {
              dispatch(startGetEmployeeSkills())
          }
      }
  }
  const mapStateToProps = (state) =&gt; {
  console.log('the skills mapstateToprops are.......',state.skill.skillList)
      return {
          skills: state.skill.skillList,
          employees: state.employee,
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(MultiSelect)
  </code></pre>
  
  <p>UserSkills actions</p>
  
  <pre><code>import axios from '../../src/config/axios';
  import { GET_SKILLS } from './types';
  
  export const getSkills = (skills) =&gt; {
      return {
          type: GET_SKILLS,
          payload: skills
      }
  }
  
  export const startGetSkills = () =&gt; {
      return (dispatch) =&gt; {
          axios.get(`/users/skills`, {
              headers: {
                  'x-auth': localStorage.getItem('token')
              }
          })
              .then((response) =&gt; {
                  console.log('the skills... response is .....', response.data)
                  dispatch(getSkills(response.data))
              })
              .catch(err =&gt; console.log(err))
      }
  }
  </code></pre>