Redux-toolkit
import { createSlice } from '@reduxjs/toolkit';
interface InitialState {
value: boolean;
}
const initialState: InitialState = {
value: false,
};
const pwdSlice = createSlice({
name: 'forgotPwd',
initialState,
reducers: {
toggleOn: (state) => {
state.value = !state.value;
},
},
});
export default pwdSlice;
export const { toggleOn } = pwdSlice.actions;
타입스크립트를 사용한 리덕스 툴킷에 createSlice부분이다.
name은 해당 모듈의 이름이다.
initialState를 통해 state의 처음 상태를 정의한다.
reducers에서 액션을 설정한다.
리듀서 함수를 이용해서 value인 불리언값을 토글형식으로 변형하기를 원했다.
toggleOn 함수를 통해서 state.value = !state.value로 state 변경을 하는 코드를 작성했다.
import { configureStore } from '@reduxjs/toolkit';
import pwdSlice from './pwdSlice';
const store = configureStore({
reducer: {
pwdForgot: pwdSlice.reducer,
},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;
타입스크립트로 작성했기 때문에 밑에 타입지정한 걸 볼 수 있다.
import { RootState } from '../../store';
import { toggleOn } from '../../store/pwdSlice';
//리덕스 툴킷
const dispatch = useDispatch();
const pwdState = useSelector((state: RootState) => {
return state.pwdForgot.value;
});
//비밀번호 잊으셨나요 클릭 이벤트
const onPwdForgotClick = () => {
dispatch(toggleOn());
};
리덕스와 비교했을때, 리덕스 툴킷은 코드가 굉장히 간결하다.
이렇게 사용하고자 하는 파일에서 state 변경을 위해 useDispatch와 useSelector()를 사용해주면 된다