frontendreact

Redux에 typesafe-actions 적용하기

frontend, redux, typescript
Views: 403

들어가면서

기존에 redux actions룰 사용해왔었는데, 이번에 타입스크립트를 도입하게되면서
사용할수록 타입정의에 번거로움을 느꼇습니다.
그래서 타입정의를 용이하게 해주는 typesafe-actions으로 변경하였습니다.

기본 리덕스 초기 셋팅이 되어있는 상태에서 진행하도록 하겠습니다.
counter 예제를 만들어 보도록 하겠습니다.

시작하기

npm i typesafe-actions로 패키지를 설치합니다.

counter.ts 리듀서 생성

액션과 액션 생성자, 리듀서를 작성합니다.
ActionType을 이용하면 액션생성자의 타입을 가져올수있습니다.
리듀서의 Action타입정의가 한줄로 간편해집니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { action, ActionType, createReducer } from 'source/_posts/frontend/redux/typesafe-actions';

const INCREMENT = 'COUNTER/INCREMENT';
const DECREMENT = 'COUNTER/DEREMENT';

const onIncrement = () => action(INCREMENT);
const onDecrement = () => action(DECREMENT);

const actionCreator = {
    onIncrement,
    onDecrement
};

export { INCREMENT, DECREMENT, onIncrement, onDecrement, actionCreator };

export interface CounterState {
    count:number;
}

export type CounterAction = ActionType<typeof actionCreator>;

const initialState: CounterState = {
    count:0
};

export default createReducer<CounterState, CounterAction>(initialState, {
    [INCREMENT]: (state) => {
        return { ...state, counter: state.count + 1 }
    },
    [DECREMENT]: state => {
        return { ...state, counter: state.count - 1 }
    }
});

rootReducer.ts

rootReducer.ts 에서 counter리듀서 불러옵니다.
이것으로 counter를 사용할 준비가 끝났습니다.

1
2
3
4
5
6
7
8
9
10
import {combineReducers} from 'redux';
import counter from './modules/counter';

const rootReducers = combineReducers({
    counter
});

export default rootReducers;

export type RootState = ReturnType<typeof rootReducers>;

Counter 컴포넌트작성

1
2
3
4
5
6
7
8
9
10
import React from 'react';

const Counter:React.FC = () => {
    return (<div>
        <p>0</p>
        <button type="button">Increment</button>
        <button type="button">Decrement</button>
    </div>);
}
export default Counter;

react-redux에서 제공하는 훅스를 이용하여 리덕스와 컴포넌트를 연동합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import {useSelector, useDispatch} from 'react-redux';
import { RootState } from '../store/rootReducer';
import { onIncrement, onDecrement } from '../store/modules/counter';

const Counter:React.FC = () => {
    const state = useSelector((state:RootState) => state.counter);
    const dispatch = useDispatch();
    return (<div>
        <p>{state.count}</p>
        <button type="button" onClick={() => dispatch(onIncrement())}>Increment</button>
        <button type="button" onClick={() => dispatch(onDecrement())}>Decrement</button>
    </div>);
}
export default Counter;

결과물

이슈

typesafe-actions를 설치한이후 콘솔에서 warning과 함께 느리게 서버가 켜지는 경우
경고메세지

해결방법으로는 typesafe-actions의 버전을 4.X 이하로 다운그레이드를 하거나
typescript를 3.7.X 이상으로 업데이트 하면 해결됩니다.
create-react-app을 사용하는경우 react-scripts 또한 3.3.X 이상으로 업데이트 해주면 됩니다.

Share