Redux - ducks pattern
redux 에서 사용하는 action creator, reducer, store... 너무 많은데,
ducks pattern 으로 써야하는 항목을 패턴화하자!
그렇게 했는데도 코드 많고 불편해!
ducks pattern 이 뭔데? >> ducks pattern 공식문서
Ducks 패턴은 하나의 상태에 필요한 액션 타입, 액션생성자 함수, 리듀서를 한 파일에 저장한다. 따라서 하나의 액션이 추가되면 하나의 파일이 추가된다.
Rules
1. 반드시 reducer란 이름의 함수를 export default 한다.
2. 반드시 action 생성자들을 함수로 export 한다.
3. 반드시 액션은 앱이름/reducer이름/Action_type 형태여야 한다.
4. 액션 타입을 UPPER_SNAKE_CASE와 같이 export 할 수 있다.
Redux Toolkit
그래서! 코드 더 짧게 쓰고, 자동화 위해 나온 RTK!
createSlice로 Action Value / Action Creator / Reducer를 하나로 합치자!
Redux Toolkit 이 뭔데? >> Redux Toolkit 공식문서
CreateSlice 로 Slice 생성해서
name,
initialStaet,
reducers,
(extraReducers)
로 Action Value / Action Creator / Reducer 한방에 만들어버리고!
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
// 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 된다.
// Action Value 까지 위에 적은 name 의 값을 따서 자동으로 생성됨
addNumber: (state, action) => {
state.number = state.number + action.payload;
},
minusNumber: (state, action) => {
state.number = state.number - action.payload;
},
},
});
// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const counterActions = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;configureStore 로
combineReducers,
thunk,
applyMiddleware,
composeWithDevTools
를 자동으로 포함한 store를 만들 수 있어!
import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "../modules/counterSlice";
import todosSlice from "../modules/todosSlice";
const store = configureStore({
reducer: { counter: counterSlice, todos: todosSlice },
});
export default store;갑자기 모든 개념이 사라져 당황했다면?
당신을 위한 신경안정제 처방.
