[Redux] redux-toolkit

🎯 redux-toolkit 활용

• redux에서 공식적으로 추천하는 helper 라이브러리
• 기존에 만들어야 하는 수많은 보일러 플레이트를 제거하고 유용한 라이브러리를 포함하여 redux 코드를 쉽게 작성하게 한다.
• redux-devtools, immerjs, redux-thunk, reselect 등의 라이브러리가 미리 포함되어 있다.
  • redux - unopinionated
  • redux-toolkit - opinionated(의견이 반영된)

 

📝 configureStore

const store = configureStore({
    reducer: {
        posts: postsReducer,
        users: usersReducer
    }
})

• redux의 createStore 함수를 래핑 한다.
• named parameter로 쉽게 store를 생성한다.
• reducer - 객체를 받아, combineReducers를 적용한다.

 

📝 createAction

const addPost = createAction('post/addPost')
 
addPost({ title: 'post 1' })
 
/*
{
    type: 'post/addPost',
    payload : { title : 'post 1' }
}
*/

• Action creator라는 함수를 만드는 함수(고차원 함수)
• 만들어진 action creator에 데이터를 넘기면, payload 필드로 들어간다.
• 생성된 action creator는 toString() 메서드를 오버라이드 해 자신이 생성하는 액션의 타입 String을 리턴한다.

 

📝 createReducer

const postsReducer =
    createReducer(initState, builder => {
            builder.addCase(addPost, (state, action) => {
                state.posts.push(action.payload)
        })
})

• reducer를 만들어준다.
• builder의 addCase 메서드를 이용하여 action마다 state의 변경을 정의한다.
• immerjs를 내부적으로 사용하므로 mutable code를 이용해 간편하게 변경 코드를 작성할 수 있다.
  • mutable code란 [1, 2, 3, 4].push(5)하면 [1, 2, 3, 4, 5]

 

📝 createSlice

const postsSlice = createSlice({
    name : 'posts',
    initialState,
    reducers: {
        addPost(state, action) {
            state.posts.push(action.payload)
        }
    }
})
 
const { addPost } = postsSlice.actions
const reducer = postsSlice.reducer

• Slice는 Action creator, reducer 등 별도로 만들어야 하는 여러 Redux 구현체를 하나의 객체로 모은 것
• createSlice 함수를 이용하여 많은 보일러 플레이트를 없애고 쉽게 action creator, reducer를 만든다.

 

📝 redux-toolkit API - createSelector

const postsSelector = state => state.posts
const userSelector = state => state.user
 
const postsByUserIdSelector = createSelector(
    postsSelector,
    userSelector,
    (posts, user) =>
        posts.filter(post =>
            post.username === user.username
    )
)

• createSelector 함수를 이용해 state를 이용한 특정 데이터를 리턴하도록 한다.
• 내부적으로 데이터를 캐시 하며, 데이터가 변동이 없다면 캐시 된 데이터를 리턴한다.