본문 바로가기
next+ts

next+ts 10일차 redux

by 멈추지않아 2022. 4. 22.
유튜브: https://www.youtube.com/watch?v=ZaHOBXQ1I_c 
깃허브:https://github.com/qjawns0222/caremaker/tree/next+ts10%EC%9D%BC%EC%B0%A8 

오늘은 redux를 적용해봤습니다.

store/reduxer/data


import { ActionProps, CounterState } from "../types/state";

const initialState: CounterState = {
  data: [
    {
      idx: "1",
      currentform: "first",
      maker: "admin",
      text: {
        title: "노래방",
        date: "2022.04.17",
        time: "12.14",
        address: "경북 구미시",
        content: "노래방 ㄱㄱ",
        tags: "[놀자,놀자,놀자]",
      },
    },
  ],
  common: {
    login: "",
  },
};

const main = (state = initialState, action: ActionProps) => {
  switch (action.type) {
    case "increase":
      return { ...state, login: "admin" };
    default:
      return state;
  }
};

export default main;

기본 저장된 데이터 설정하고 increase가 들어오면 login이 admin으로 변하도록 설정해봤습니다.

이렇게 해서 combinereducer와 리턴 타입을 만들어줬습니다.

미들웨어 자동으로 추가해주는 거와 개발환경일때 툴이용하개 해주는 함수를 만들어줬습니다.

그리고  next는 redux가 시행할때마다 다시생성 된다고 글을봤는데 그거때문에 wrapper을써준다고합니다.

그냥 바로 store넣어줘도 되긴하느데 저렇게 구분하도록 함수를 썼습니다.

다으므에는 저기 빨간줄뜨는걸 지워보고 가능하다면 initialstate를 api통해서 받아오는게 되는지 해보겠습니다.