title: Combining global redux store with local state of the component
body: <p>The challenge I came across is using global store slice, namely 'genres', which is an array of objects, in a local state to manipulate check/uncheck of the checkboxes. The problem occurs when I'm trying to use props.genres in the initial state. Looks like I'm getting an empty array from props.genres when the local state is initialized.</p>
  
  <pre><code>const Filters = (props) =&gt; {
      const { genres, getSelected, loadGenres, getGenres, clearFilters } = props
      const [isChecked, setIsChecked] = useState(() =&gt;
          genres.map(genre =&gt; (
              {id: genre.id, value: genre.name, checked: false}
          ))
      )
      const optionsSortBy = [
          {name: 'Popularity descending', value: 'popularity.desc'},
          {name: 'Popularity ascending', value: 'popularity.asc'},
          {name: 'Rating descending', value: 'vote_average.desc'},
          {name: 'Rating ascending', value: 'vote_average.asc'},
      ]
      const d = new Date()
      let currentYear = d.getFullYear()
      let optionsReleaseDate = R.range(1990, currentYear + 1).map(year =&gt; (
          {name: year + '', value: year}
      ))
  
      useEffect(() =&gt; {
          const url = `${C.API_ENDPOINT}genre/movie/list`
          loadGenres(url, C.OPTIONS)
      }, [])
  
      const handleCheckbox = (e) =&gt; {
          let target = e.target
          getGenres(target)
      }
  
      const handleSelect = (e) =&gt; {
          let target = e.target
          let action = isNaN(target.value) ? 'SORT_BY' : 'RELEASE_DATE'
          getSelected(action, target)
      }
  
      const handleSubmitBtn = (e) =&gt; {
          e.preventDefault()
          clearFilters()
      }
  
      return (
          &lt;form className={classes.FiltersBox}&gt;
              &lt;Submit submited={handleSubmitBtn} /&gt;
              &lt;Select name="Sort By:" options={optionsSortBy} changed={handleSelect} /&gt;
              &lt;Select name="Release date:" options={optionsReleaseDate} changed={handleSelect} /&gt;
              &lt;Genres genres={isChecked} changed={handleCheckbox} /&gt;
          &lt;/form&gt;
      )
  }
  
  const mapStateToProps = (state) =&gt; {
      return {
          genres: state.fetch.genres,
      }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          loadGenres: (url, options) =&gt; dispatch(A.getApiData(url, options)),
          getGenres: (targetItem) =&gt; dispatch({
              type: 'CHECK_GENRES',
              payload: targetItem
          }),
          getSelected: (actionType, targetItem) =&gt; dispatch({
              type: actionType,
              payload: targetItem,
          }),
          clearFilters: () =&gt; dispatch({type: 'CLEAR_FILTERS'})
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Filters);
  </code></pre>
  
  <pre><code>import * as R from 'ramda';
  import fetchJSON from '../utils/api.js';
  
  export const getApiData = (url, options) =&gt; async (dispatch) =&gt; {
      const response = await fetchJSON(url, options)
      const data = response.body
      const dataHas = R.has(R.__, data)
      let actionType = dataHas('genres') ? 'FETCH_GENRES' : 'FETCH_MOVIES'
  
      dispatch({
          type: actionType,
          payload: data
      })
  }
  </code></pre>
  
  <pre><code>export const fetchReducer = (state = initialState, action) =&gt; {
      const { payload } = action
      if (action.type === 'FETCH_GENRES') {
          return {
              ...state,
              isLoading: false,
              genres: [...payload.genres]
          }
      }
      if (action.type === 'FETCH_MOVIES') {
          return {
              ...state,
              isLoading: false,
              movies: [...payload.results]
          }
      }
      return state
  }
  </code></pre>