참고
Redux-Toolkit이란?
NOTE
효율적인 Redux를 개발하기 위해 만들어진 툴킷이다.
npm install @reduxjs/toolkit
JavaScript
복사
•
Redux보다 훨~씬 간단하므로 꼭 쓰길 권장한다. 애초에 개발한곳이 Redux개발한 쪽이다.
configureStore
NOTE
redux-toolkit에서 제공하는 createStore이다. (공식적으로 이걸 더 권장한다.)
import {configureStore} from '@reduxjs/toolkit'
const store = configureStore({
reducer: {counter: counterReducer, auth: authSliceReducer}
});
JavaScript
복사
현재 2개의 rducer로 하나의 store를 만드는 코드이다.
state 접근방식 변경
const counter = useSelector((state) => state.counter);
const show = useSelector((state) => state.showCounter);
JavaScript
복사
기본 Redux state접근방법
const counter = useSelector((state) => state.counter.counter);
const show = useSelector((state) => state.counter.showCounter);
JavaScript
복사
Redux-toolkit 여러 Reducer 작성시 state접근방법
•
reducer가 여러개로 들어가서, key값으로 구분해주어야 한다
createSlice
NOTE
기존의 Reduce작성을 보다 편하게 해주는 함수이다!
import {createSlice} from "@reduxjs/toolkit";
const initialCounterState = {counter: 0, showCounter: true}
const counterSlice = createSlice({
name: 'counter',
initialState: initialCounterState,
reducers: {
increment(state) {
state.counter++;
},
decrement(state) {
state.counter--;
},
increase(state, action) {
state.counter = state.counter + action.payload;
},
toggleCounter(state) {
state.showCounter = !state.showCounter;
}
}
})
export const counterActions = counterSlice.actions
export default counterSlice.reducer
JavaScript
복사
•
위의 코드에서 state를 직접 수정하는것처럼 보이지만, 내부적으로 state는 불변이고 값을 복사해서 반환해준다.
•
이제 action의 type을 따로 작성해주지 않아도 된다!
dispath 호출방식 변경
import { useSelector, useDispatch } from 'react-redux';
const dispatch = useDispatch();
const incrementHandler = () => {
dispatch({ type: 'increment' });
};
JavaScript
복사
기본 Redux 방식
•
type을 정확하게 입력하지 않으면 에러가 발생했다
import { useSelector, useDispatch } from 'react-redux';
import {counterActions} from '../store/counter';
const dispatch = useDispatch();
const incrementHandler = () => {
dispatch(counterActions.increment())
}
JavaScript
복사
Redux-toolkit으로 dispatch
•
이제 함수자체로 실행되기 떄문에, type걱정을 할 필요가 없어짐