immer
๋ฐฐ์ด์ด๋, ๊ฐ์ฒด๊ฐ์ ๋ถ๋ณ์ฑ ํ์ ์ ๊ฐ์ง state๋ฅผ ์ ๋ฐ์ดํธ ํ๊ธฐ์ํด์ , ์คํ๋ ๋ ์ฐ์ฐ์ (...)๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
ํ์ง๋ง depth๊ฐ ํฐ ๊ฐ์ฒด๋ฅผ ๊น์ ๋ณต์ฌ๋ฅผ ํ๊ธฐ์ ์คํ๋ ๋ ์ฐ์ฐ์๋ก ๊ฐ๋ฐ์ ์ ์ฅ์์ ๊ต์ฅํ ํ๋ ์ผ์ด๋ค.
โจimmer๋ฅผ ์ฌ์ฉํ๋ฉด, draft๋ฅผ ์ฃผ๋๋ฐ ๊น์ ๋ณต์ฌ๊ฐ ๋ ๊ฐ์ฒด์ด๋ค!
[๊ธฐ์กด์ ๋ฐฉ์]
else if (action.type === ADD_FRIEND) {
const newFriend = action.payload;
const newState = { ...state, friends: [...state.friends, newFriend] };
return newState;
[immer]
const newState = produce(
(state,
(draft) => {
const newFriend = action.payload;
draft.friends.push(newFriend);
})
);
๊น์ ๋ณต์ฌ๊ฐ ๋ draft์ ์๋ก์ด ๊ฐ์ push๋ง ํด์ฃผ๋ฉด๋๋ค!
โ produce ํจ์: ์๋ก์ด ์ํ๋ฅผ ์์ฑํ๋๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์ฒซ ๋ฒ์งธ๋ ํ์ฌ ์ํ์ด๊ณ , ๋ ๋ฒ์งธ๋ ์ ๋ฐ์ดํธ๋ฅผ ์ํํ๋ ํจ์์ ๋๋ค.
createReducer
createReducer๋ฅผ ์ฌ์ฉํ๋ฉด, ์๋์ผ๋ก immer์ ์ฌ์ฉํด mutateํ๊ฒ ๋ฐฐ์ด,๊ฐ์ฒด state๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ค.
state.todos[3].completed = true
์๋ก์ด state๋ฅผ ๋ฆฌํดํ ์ ์๊ณ , mutateํ๋ค!
switch ์์ฐ๊ฒํด์ค!
์๋ก์ด state๊ฐ ์๋๋ฉด ์๋ฌด๊ฒ๋ ๋ฆฌํดํ์ง ์๋๋ค?
push๋ ๋ฆฌํดํ์ง ์๋๋ค? mutateํ๊ฒ ํด์ค๋ค?
filter๋ ์๋ก์ด array๋ฅผ ๋ฆฌํดํ๋ค. mutate๊ฐ ์๋๋ผ
createSlice
reducer์ ํจ์ ๊ฐ์ฒด, ์ฌ๋ผ์ด์ค ์ด๋ฆ store, initalstate , action.type, action creator ๋ฑ
๊ธฐ์กด์ ๋ค ์์ฑํด์ผํ์ง๋ง, Slice๋ก ๊ฐ๋ตํ๊ฒ ์ธ ์ ์๋ค.
โ ๊ฐ๋จํ ๋ฆฌ๋์ ๋ฐ ์ก์ ์์ฑ์๋ฅผ ์์ฑํ๋ ๋ฐ ์ฌ์ฉ๋๋ ํฌํผ ํจ์
import { createSlice } from '@reduxjs/toolkit';
const friendsSlice = createSlice({
name: 'friends',
initialState: { friends: [] },
reducers: {
//actions๋ค
addFriend: (state, action) => {
const newFriend = action.payload;
state.friends.push(newFriend);
},
},
});
//actionCreatorํจ์ export
export const { addFriend } = friendsSlice.actions;
export default friendsSlice.reducer;
โ๏ธ immer๋ฅผ ๋ด๋ถ์ ์ผ๋ก ์ฌ์ฉํ์ฌ ๋ถ๋ณ์ฑ์ ์ ์งํฉ๋๋ค.
//store.js
import { configureStore } from '@reduxjs/toolkit';
import friendsReducer from './friendsSlice';
const store = configureStore({
reducer: {
friends: friendsReducer,
},
});
// ์ฌ์ฉ ์์
store.dispatch(addFriend({ name: 'John' }));
์ด ๋ฆฌ๋์ ์ฌ๋ผ์ด์ค๋ฅผ Redux ์คํ ์ด์ ๋ฑ๋กํ๋ฉด, immer๊ฐ ๋ด๋ถ์ ์ผ๋ก ์ฌ์ฉ๋์ด ์ํ์ ๋ณ๊ฒฝ์ ์์ ํ๊ฒ ์ฒ๋ฆฌํ๋ค.
createAction
action creator ํจ์ ์์ฑ
API
- configureStore(): createStore๋จ์ํ๋ ๊ตฌ์ฑ ์ต์ ๊ณผ ์ ์ ํ ๊ธฐ๋ณธ๊ฐ์ ์ ๊ณตํ๊ธฐ ์ํด ๋ํ๋ฉ๋๋ค. ์๋์ผ๋ก ์ฌ๋ผ์ด์ค ๋ฆฌ๋์๋ฅผ ๊ฒฐํฉํ๊ณ , ์ ๊ณตํ๋ Redux ๋ฏธ๋ค์จ์ด๋ฅผ ์ถ๊ฐํ๊ณ , redux-thunk๊ธฐ๋ณธ์ ์ผ๋ก ํฌํจํ๋ฉฐ, Redux DevTools Extension์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- createReducer(): ์ค์์น ๋ฌธ์ ์์ฑํ๋ ๋์ Case Reducer ํจ์์ ์์ ์ ํ์ ์กฐํ ํ ์ด๋ธ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ๋ํ ์๋์ผ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ immer๋ฅผ ์ฌ์ฉ ํ์ฌ state.todos[3].completed = true.
- createAction(): ์ฃผ์ด์ง ์ก์ ์ ํ ๋ฌธ์์ด์ ๋ํ ์ก์ ์์ฑ๊ธฐ ํจ์๋ฅผ ์์ฑํฉ๋๋ค.
- createSlice(): ๋ฆฌ๋์ ํจ์์ ๊ฐ์ฒด, ์ฌ๋ผ์ด์ค ์ด๋ฆ, ์ด๊ธฐ ์ํ ๊ฐ์ ๋ฐ์๋ค์ด๊ณ ํด๋น ์ก์ ์์ฑ์์ ์ก์ ์ ํ์ ์ฌ์ฉํ์ฌ ์ฌ๋ผ์ด์ค ๋ฆฌ๋์๋ฅผ ์๋์ผ๋ก ์์ฑํฉ๋๋ค.
- combineSlices(): ์ฌ๋ฌ ์ฌ๋ผ์ด์ค๋ฅผ ๋จ์ผ ๋ฆฌ๋์๋ก ๊ฒฐํฉํ๊ณ ์ด๊ธฐํ ํ ์ฌ๋ผ์ด์ค์ "์ง์ฐ ๋ก๋ฉ"์ ํ์ฉํฉ๋๋ค.
- createAsyncThunkpending/fulfilled/rejected: ์์ ์ ํ ๋ฌธ์์ด๊ณผ ์ฝ์์ ๋ฐํํ๋ ํจ์๋ฅผ ๋ฐ์๋ค์ด๊ณ ํด๋น ์ฝ์์ ๊ธฐ๋ฐ์ผ๋ก ์์ ์ ํ์ ์ ๋ฌํ๋ ์ฝํฌ๋ฅผ ์์ฑํฉ๋๋ค.
- createEntityAdapter: ์ ์ฅ์์์ ์ ๊ทํ๋ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํด ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฆฌ๋์ ๋ฐ ์ ํ๊ธฐ ์ธํธ๋ฅผ ์์ฑํฉ๋๋ค.
- ์ฌ์ฉํ๊ธฐ ์ฝ๋๋ก ๋ค์ ๋ด๋ณด๋ธ Reselect ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ์ ํธ๋ฆฌํฐ createSelector์ ๋๋ค .