{"size": 2320, "ext": "js", "max_stars_repo_path": "pages/test.js", "max_stars_repo_name": "e-build/recomeal-admin", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "pages/test.js", "max_issues_repo_name": "e-build/recomeal-admin", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "pages/test.js", "max_forks_repo_name": "e-build/recomeal-admin", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 37.4193548387, "max_line_length": 118, "alphanum_fraction": 0.4625}
import {Layout} from "@components/common";
import React, {useCallback} from "react";
import {useDispatch, useSelector} from "react-redux";
import {tvShowAction} from "../reducers/test/tvShow";
import {countMinusAction, countPlusAction} from "../reducers/test/count";

const Test = () => {
    const dispatch = useDispatch(); // dispatch를 사용하기 쉽게 하는 hook
    const count = useSelector(state => state.dummy); // store의 state를 불러오는 hook   store의 state 중에서 count의 state를 불러온다.
    const { tvShowTitle, tvShowContents } = useSelector(state => state.tvShow); // tvShow redux의 state들을 불러온다.

    const onClickHero = useCallback((hero) => () => {
        dispatch(tvShowAction.loadTvShowRequestAction(hero));
    }, []); // hero 넣어서 동적으로 data를 변경해주는 action 생성함수를 시행한다.


    const onClickPlus = useCallback(() => { // useCallback은 최적화를 위한 hook이다 이 앱에선 굳이 사용 안 해도 되는데 습관이 들면 좋기에 사용.
        dispatch(countPlusAction());
    }, []);

    const onClickMinus = useCallback(() => {
        dispatch(countMinusAction());
    }, []);


    return (
        <Layout>
            <div>
                {/* redux test */}
                <div>
                    <p>
                        카운트 :{count}
                    </p>
                    <button onClick={onClickPlus}>+</button>
                    <button onClick={onClickMinus}>-</button>
                </div>

                {/* redux-saga test */}
                <div>
                    <button onClick={onClickHero('superman')}>슈퍼맨</button>
                    <button onClick={onClickHero('batman')}>배트맨</button>
                    {tvShowTitle && <div>{tvShowTitle}</div>}
                    <br/>
                    {tvShowContents && (
                        <div>
                            {tvShowContents.map(show => (
                                <div key={show.id}>
                                    <a href={show.url}>{show.name}</a>
                                    <div>점수 : {show.score}</div>
                                    <div>타입 : {show.type}</div>
                                    <div>언어 : {show.language}</div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </Layout>
    )
}

export default Test;