{"size": 1343, "ext": "js", "max_stars_repo_path": "src/pages/discover/child-pages/djradio/child-cpns/radio-category/index.js", "max_stars_repo_name": "uithen/react-cloudmusic", "max_stars_repo_stars_event_min_datetime": "2021-04-30T09:40:54.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-30T09:40:54.000Z", "max_issues_repo_path": "src/pages/discover/child-pages/djradio/child-cpns/radio-category/index.js", "max_issues_repo_name": "uithen/react-cloudmusic", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/discover/child-pages/djradio/child-cpns/radio-category/index.js", "max_forks_repo_name": "uithen/react-cloudmusic", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.8269230769, "max_line_length": 79, "alphanum_fraction": 0.5383469844}
import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'
import classnames from 'classnames'

import { 
  getRadioCategoriesAction,
  changeCurrentCateIdAction
 } from '../../store/actionCreators'

import { CategoryWrapper, BgImg } from './styled'

export default memo(function HERadioCategory() {
  const {categories, currentCateId} = useSelector(
    state => ({
      categories: state.getIn(['djradio', 'categories']),
      currentCateId: state.getIn(['djradio', 'currentCateId']),
    }),
    shallowEqual
  )
  const dispatch = useDispatch()
  console.log(categories)
  useEffect(
    () => dispatch(getRadioCategoriesAction),
    [dispatch]
  )

  return (
    <CategoryWrapper>
      <ul>
        {
          categories.map(cate => {
            return (
              <li key={cate.id}>
                <span
                  className={classnames({"active": cate.id === currentCateId})}
                  onClick={e => dispatch(changeCurrentCateIdAction(cate.id))}
                >
                  <BgImg
                    imgUrl={cate.picWebUrl} 
                    className="img"
                  />
                  <em>{cate.name}</em>
                </span>
              </li>
            )
          })
        }
      </ul>
    </CategoryWrapper>
  )
})
