5. TypeScript 에서 리덕스 프로처럼 사용하기 · GitBook

[utterances-bot]

5. TypeScript 에서 리덕스 프로처럼 사용하기 · GitBook

https://react.vlpt.us/using-typescript/05-ts-redux.html

[kkjk1176]

typesafe-actions의 createStandardAction은 최신버전에서 deprecated로 분류되었습니다. 공부하시는분들 참고하세요.

[mstarpapa]

정말 최신버전에서는 createStandardAction 가 없다고 나오내요 kkjk1176님 정보 감사합니다. 혹 createStandardAction 을 사용한 예제를 실습해보고 싶으신 분은 버전을 낮추어서 진행해보시면 됩니다. 저는 yarn remove typesafe-actions 를 통해 기존거를 삭제하고 yarn add typesafe-actions@4.4.2 를 통해 실습에 사용한 4.4.2 버전을 사용하니 정상적으로 실습 할 수 있었습니다.

[pandac-hyeonjun]

typesafe-actions를 최신 버전으로 설치하실 분들은 import { deprecated, ActionType, createReducer } from 'typesafe-actions'; const { createAction, createStandardAction } = deprecated;

이방식으로 쓰시면 됩니다. 저도 살짝 헤맸어요.

[2Paradise]

모듈을 분리하는 과정에서 Parsing error: Cannot read property 'name' of undefined 에러가 발생합니다. combineReducers 에 reducer 삽입 과정에서 이러한 문제가 발생하는 것 같은데 원인을 찾기가 쉽지 않네요 ㅠ 아시는분 답변 부탁드립니다.

[sjung7674]

typesafe-actions 5.1.0 버전 사용시 createStandardAction deprecated 되어 createAction로만 사용 하시면 되는데.. createAction 함수 사용법이 조금 변경 된 듯 합니다.

import { createAction, createReducer, ActionType } from "typesafe-actions";

(...)

export const addTodo = createAction(ADD_TODO, (text: string) => ({
  id: nextId++,
  text: text,
}))<Todo>();

(...)

로 하였더니 잘 작동 하였습니다.

실습에 도움이 되었으면 좋겠습니다.

참고 : https://github.com/piotrwitek/typesafe-actions

[minhee0327]

@2Paradise 님 혹시 문제 해결되셨나요..?

저는 좋은방법인지는 잘 모르겠지만 임시방편으로 eslint 버전을 낮추어서 같은 에러 메세지를 해결했습니다.

rm yarn.lock 으로 yarn.lock을 삭제하고 rm -rf node_modules 노드 모듈도 삭제한 다음에

package.json파일에서 아래 부분을 수정한 뒤 (eslint와 버전문제가 생긴것 같습니다.) "@typescript-eslint/eslint-plugin": "^2.23.0", "@typescript-eslint/parser": "^2.23.0"

npm i 으로 다시 모듈을 설치했습니다. npm start 혹은 yarn start로 시작해보시면 아마 될것같습니다!

참고로 위에 분들이 알려주신대로 typesafe-actions버전또한 downgrade했습니다. 저는 4.4.2 버전을 사용했습니다. [또한 yarn.lock을 지운만큼.. 패키지 관리는 npm으로만 진행했습니다...좋은방법같지가 않네요..ㅠㅠ] 혹시 더 좋은 방법이 있으면 꼭 알려주시면 감사하겠습니다..!!ㅠㅠ

참고 자료는 아래 링크 참조했습니다. https://bit.ly/33WX7Zl

[snapCheol]

Parsing error: Cannot read property 'name' of undefined 에러가 나시는 분들은 타입스크립트 최신버전으로 설치하시면 해결이 가능한거 같습니다.

[lanore78]

패캠 강의 보다가 질문이 생겨 남깁니다.

Redux 의 Store로 Class를 사용할 경우 필드만 있는 경우는 문제없이 사용 가능하지만, 함수가 선언되어 있는 Class는 컴파일오류가 발생하는데요, 이게 문법적으로 어떤 문제때문에 발생할까요?

예를 들어 본 강의의 CounterState를 아래와 같이 선언하면 이상이 없이 동작합니다.

export class CounterState  {
  constructor(public count: number){}
};

하지만 아래와 같이 여기에 함수를 추가하면, Type을 제대로 인식하지 못하네요.

export class CounterState  {
  constructor(public count: number){}

   hello() : void {
     console.log("Dummy");
   }
};

[i0boy]

https://github.com/devtaehyeok/velopert-ts-redux-study/blob/main/src/modules/todos.ts todos를 handleAction으로 리팩토링해 보았습니다. 참고하세용~

[clean-teach]

카운터 컴포넌트와 카운터 컨테이너 컴포넌트 코드에 오타가 있네요.

components/Counter.tsx type CounterProps { ---> type CounterProps = {

containers/CounterContainer.tsx function CounterContainer() => { ---> function CounterContainer() {

[design-view]

dispatch(getUserProfileThunk(username)); 이부분에서 계속 에러가납니다 ㅠㅠ EmptyAction<"github/GET_USER_PROFILE"> | PayloadAction<...> | PayloadAction<...>>' 형식의 인수는 'AnyAction' 형식의 매개 변수에 할당될 수 없습니다.ts(2345)

[deveq]

19년 이후 5버전이 패치되면서 createAction의 사용법이 조금 변경되었습니다. 혹시나 착오가 없길 바라며.. https://github.com/piotrwitek/typesafe-actions/issues/143 이곳에서 v5의 사용법을 간략하게 확인할 수 있습니다.

[likeyellow]

리액트(with 타입스크립트) 책이 의외로 많이 없어서... 책을 한 권 다 봤는데도 아직 익숙하지 않아 뭘 만들려고 하는데 자꾸 에러가 나서 여기까지 왔습니다. 리액트하고 타입스크립트를 같이 사용하는 경우 여기 코드 방식이 거의 최신의 전형적인 예시인것 같네요 그치만 리덕스는 아직 어려워서 ㅠㅠ 제가 이 페이지에 있는 코드가 완전 손에 익으면 이제 리액트 경력자로 취업하겠습니다. 카페에서 공부중인데 약간 어려워서 잠깐 쉬는 시간 갖고 있네요 ㅠㅠ