[TIL] 23.07.28 Today I Learned

요약: 영화 검색 웹페이지 검색 기능 구현

일시: 23.07.28

장소: 더휴먼컴퓨터아트아카데미

배운 점:

module/search.js

// ----------------------액션 타입 작성----------------------

export const CALL_API = 'counter/CALL_API';

// ----------------------액션 함수 작성----------------------

export const callapi = (value) => {
    return {
      type: 'CALL_API',
      payload: value,
    };
  };


// ----------------------초기 상태 작성----------------------

const initialState = {
    movieInfo: [],
};

// -----------------------리듀서 작성------------------------

function saveApi(state = initialState, action) {
  switch (action.type) {
    case CALL_API:
      return {
        ...state,
        movieInfo: action.payload
      };
    default:
      return state;
  }
}

export default saveApi;

src/module/index.js

import { combineReducers } from "redux";
import searchReducer from "./search";

const rootReducer = combineReducers({
    searchReducer,
});

export default rootReducer;

src/Search.jsx

import React from 'react'
import { useState, useEffect } from "react";
import axios from "axios";
import { useSelector, useDispatch } from 'react-redux';
import {callapi} from '../../modules/search'

const Search = () => {
    // const [movieInfo, setMovieInfo] = useState([]);
    const movieInfo = useSelector((state) => state.searchReducer.saveApi);
    const dispatch = useDispatch();

    const saveApiData = (data) => {
        dispatch(callapi(data)); // 액션 디스패치를 통해 상태 업데이트
      };

    const IMG_BASE_URL = "http://image.tmdb.org/t/p/w1280";

    const getMovies = async () => {
        await axios
            .get(
                "TMDB.API"
            )
            .then((response) => {
                // 요청 성공 시의 처리
                console.log("응답 데이터:", response.data.results);
                // setMovieInfo(response.data.results);
                saveApiData(response.data.results)
            })
            .catch((error) => {
                console.error("오류 발생:", error);
            });
    };

    useEffect(() => {
        getMovies();
    }, []);
  return (
    <div>Search</div>
  )
}

export default Search

src/module/search.js	src/module/index.js	src/Search.jsx
액션 타입(counter/CALL_API) 액션함수(callapi) 초기상태(initialState) 리듀서(saveApi)	combineReducers(리듀서 추가)	useSelector, useDispatch 임포트 액션함수 임포트 useSelector((리듀서 객체) ⇒ 리듀서 객체.루트리듀서.가져올 속성) dispatch = useDispatch(); dispatch(액션함수(매개변수))

 

 

부족한 점: