스토어에 추가하려는 미들웨어 및 인핸서 어레이를 제공하면 자동으로 applyMiddleware 및 compose을 호출해 줍니다.
Redux DevTools Extension을 자동으로 활성화 합니다.
또한configureStore는 기본적으로 각각 특정 목표를 가진 일부 미들웨어를 추가합니다.
redux-thunk는 컴포넌트 외부의 동기 및 비동기 논리 액션 처리에 가장 일반적으로 사용되는 미들웨어입니다.
개발 단계에서 상태를 변경하거나 직렬화할 수 없는 값을 사용하는 것과 같은 일반적인 실수를 확인하는 미들웨어를 추가합니다.
스토어 설정 코드를 더 짧고 읽기 쉽게 해주며, 동시에 좋은 디폴트 동작을 얻을 수 있음을 의미합니다. configureStore API를 사용하는 가장 간단한 방법은 루트 리듀서 함수를 reducer라는 이름의 매개변수로 전달하는 것입니다.
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducers'
const store = configureStore({
reducer: rootReducer,
})
export default store
"슬라이스 리듀서"로 가득 찬 객체를 전달할 수도 있으며, configureStore는combineReducer를 호출합니다.
import { configureStore } from '@reduxjs/toolkit'
import usersReducer from './usersReducer'
import postsReducer from './postsReducer'
const store = configureStore({
reducer: {
users: usersReducer,
posts: postsReducer,
},
})
export default store
이것은 1 depth 레벨의 리듀서에서만 동작합니다. 리듀서를 중첩하려면CombineReducers를 직접 호출해야 합니다.
스토어 설정을 사용자 정의해야 하는 경우 추가 옵션을 전달할 수 있습니다. Redux Toolkit을 사용하는 핫 리로딩 예제는 다음과 같습니다.
import { configureStore } from '@reduxjs/toolkit'
import monitorReducersEnhancer from './enhancers/monitorReducers'
import loggerMiddleware from './middleware/logger'
import rootReducer from './reducers'
export default function configureAppStore(preloadedState) {
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(loggerMiddleware),
preloadedState,
enhancers: [monitorReducersEnhancer],
})
if (process.env.NODE_ENV !== 'production' && module.hot) {
module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
}
return store
}
미들웨어 인수를 제공하면 configureStore는 사용자가 나열된 미들웨어만 사용합니다.
사용자 정의 미들웨어와 디폴트 미들웨어를을 함께 사용하려면 콜백 표기법을 사용하고
getDefaultMiddleware를 호출하고, 해당 함수가 반환하는 미들웨어 배열에 결과를 포함할 수 있습니다.
리듀서 작성하기
Reducers는 가장 중요한 개념입니다. 일반적인 리듀서 함수는 다음을 수행해야 합니다.
액션 객체의 타입 필드를 보고 어떻게 응답해야 하는지 확인합니다.
상태를 변경해야 하는 부분의 복사본을 만들고 해당 복사본만 수정하여 상태를 변경할 수 없도록 업데이트합니다.
Redux 툴킷에는 Redux 문서에 표시된 것과 유사한createReducer함수가 포함되어 있습니다.
그러나 createReducer 유틸리티에는 더 나은 기능을 제공하는 몇 가지 특별한 "마법"이 있습니다.
내부적으로Immer라이브러리를 사용하므로 일부 데이터를 "변경"하는 코드를 작성할 수 있지만
실제로는 불변 업데이트를 적용합니다.
즉, 리듀서에서 실수로 상태를 변경하는 것은 사실상 불가능합니다.
일반적으로 switch 문을 사용하는 모든 Redux 리듀서는 createReducer를 직접 사용하도록 변환할 수 있습니다.(with builder)
스위치의 각 케이스는 createReducer에 전달된 객체의 키가 됩니다.
개체 확산 또는 배열 복사와 같은 변경 불가능한 업데이트 논리는 아마도 직접적인 "돌연변이"로 변환될 수 있습니다.
변경 불가능한 업데이트를 있는 그대로 유지하고 업데이트된 복사본을 반환하는 것도 괜찮습니다.
다음은 createReducer를 사용하는 방법에 대한 몇 가지 예입니다. switch 문과 변경할 수 없는 업데이트를 사용하는 일반적인 "Todo" 리듀서부터 시작하겠습니다.
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO': {
return state.concat(action.payload)
}
case 'TOGGLE_TODO': {
const { index } = action.payload
return state.map((todo, i) => {
if (i !== index) return todo
return {
...todo,
completed: !todo.completed,
}
})
}
case 'REMOVE_TODO': {
return state.filter((todo, i) => i !== action.payload.index)
}
default:
return state
}
}
state.concat(),state.map(), 객체 스프레드 연산자를 통해 불변을 적용합니다.
createReducer를 사용하면 해당 예제를 상당히 줄일 수 있습니다. 불변처럼 상태를 "변경"하는 능력은 깊이 중첩된 상태를 업데이트하려고 할 때 특히 유용합니다.(by immer)
const todosReducer = createReducer([], (builder) => {
builder
.addCase('ADD_TODO', (state, action) => {
// "mutate" the array by calling push()
state.push(action.payload)
})
.addCase('TOGGLE_TODO', (state, action) => {
const todo = state[action.payload.index]
// "mutate" the object by overwriting a field
todo.completed = !todo.completed
})
.addCase('REMOVE_TODO', (state, action) => {
// Can still return an immutably-updated value if we want to
return state.filter((todo, i) => i !== action.payload.index)
})
})
createReducer 사용 시 고려할 점
createReducer 함수는 매우 유용할 수 있지만 다음 사항에 유의하십시오.
"변이" 코드는 createReducer 함수 내에서만 올바르게 작동합니다.
Immer를 사용하면 draft 상태를 "변경"함과 동시에 새 상태 값을 반환하는 것을 혼합할 수 없습니다.
대부분의 액션 생성자는 매우 간단합니다. 일부 매개변수를 사용하여 특정 타입 필드와 액션 내부에 매개변수가 있는 액션 객체를 반환합니다. 해당 매개변수는 일반적으로 액션 객체를 구성하기 위한 Flux 표준 액션 규칙의 일부인 페이로드라는 필드에 넣습니다. 일반적인 액션 생성자는 다음처럼 생겼습니다.
function addTodo(text) {
return {
type: 'ADD_TODO',
payload: { text },
}
}
createAction으로 액션 생성자 정의하기
직접 액션 제작자를 작성하는 것은 지겹습니다. Redux toolkit은 주어진 액션 타입을 사용하는 액션 생성자를 생성하고 해당 인수를 페이로드 필드로 바꾸는createAction이라는 함수를 제공합니다.
createAction은 또한 결과 페이로드 필드를 사용자 정의하고 선택적으로 메타 필드를 추가할 수 있는 "ready 콜백" 인수를 허용합니다. ready 콜백으로 액션 생성자를 정의하는 방법에 대한 자세한 내용은 createAction API 참조를 참조하세요.
액션 생성자를 액션 타입으로 사용하기
Redux 리듀서는 상태를 업데이트하는 방법을 결정하기 위해 특정 액션 타입을 찾아야 합니다.
일반적으로 액션 타입 문자열과 액션 생성자 함수를 별도로 정의하여 수행합니다.
Redux Toolkit createAction 함수는 이를 더 쉽게 만들기 위해 몇 가지 트릭을 사용합니다.
첫째, createAction은 액션 생성자의 toString() 메서드를 재정의합니다.
액션 생성자 자체를 "액션 타입" 참조로 사용할 수 있음을 의미합니다.
둘째, 액션 타입은 액션 생성자의 타입 필드에도 정의되어 있습니다.
const actionCreator = createAction('SOME_ACTION_TYPE')
console.log(actionCreator.toString())
// "SOME_ACTION_TYPE"
console.log(actionCreator.type)
// "SOME_ACTION_TYPE"
const reducer = createReducer({}, (builder) => {
// actionCreator.toString() will automatically be called here
// also, if you use TypeScript, the action type will be correctly inferred
builder.addCase(actionCreator, (state, action) => {})
// Or, you can reference the .type field:
// if using TypeScript, the action type cannot be inferred that way
builder.addCase(actionCreator.type, (state, action) => {})
})
즉, 별도의 액션 타입 변수를 작성하여 사용하거나, const SOME_ACTION_TYPE = "SOME_ACTION_TYPE"과 같은 액션 타입의 이름과 값을 반복할 필요가 없습니다.
불행히도, 문자열에 대한 암시적 변환은 switch 문에선 대해 발생하지 않습니다. switch 문에서 이러한 액션 생성자 중 하나를 사용하려면 actionCreator.toString()을 직접 호출해야 합니다.
const actionCreator = createAction('SOME_ACTION_TYPE')
const reducer = (state = {}, action) => {
switch (action.type) {
// ERROR: this won't work correctly!
case actionCreator: {
break
}
// CORRECT: this will work as expected
case actionCreator.toString(): {
break
}
// CORRECT: this will also work right
case actionCreator.type: {
break
}
}
}
TypeScript와 함께 Redux Toolkit을 사용하는 경우,
액션 작성자가 객체 키로 사용될 때 TypeScript 컴파일러는 암시적 toString() 변환을 허용하지 않을 수 있습니다.
이 경우 타입 단언하거나 (actionCreator as string)
type필드를 사용해야 할 수 있습니다.
상태의 슬라이스 만들기
Redux 상태는 일반적으로 CombineReducers에 전달되는 리듀서에 의해 정의된 "슬라이스"로 구성됩니다.
import { combineReducers } from 'redux'
import usersReducer from './usersReducer'
import postsReducer from './postsReducer'
const rootReducer = combineReducers({
users: usersReducer,
posts: postsReducer,
})
그러나 이 접근 방식을 사용하여 코드를 작성하는 것은 지루합니다. 각각의 개별 타입의 요청은 유사한 구현을 반복해야 합니다.
세 가지 다른 경우에 대해 고유한 액션타입을 정의해야 합니다.
이러한 각 액션 타입에는 일반적으로 해당 액션 생성자 함수가 있습니다.
올바른 순서로 올바른 액션을 전달하는 썽크를 작성해야 합니다.
createAsyncThunk는 액션 타입 및 액션 생성자를 생성하고 해당 액션을 전달하는 썽크를 생성하여 이 패턴을 추상화합니다.
createAsyncThunk와 비동기 요청
개발자는
API 요청을 수행하는 데 필요한 실제 로직
Redux 액션 히스토리 로그에 표시되는 액션 타입 이름,
리듀서가 가져온 데이터를 처리하는 방법에
가장 관심이 있을 것입니다. 여러 액션 타입을 정의하고 올바른 순서로 액션을 전달하는 반복적인 세부 사항은 중요하지 않습니다.
createAsyncThunk는 이 프로세스를 단순화합니다.
액션 타입 접두사 문자열,
실제 비동기 논리를 수행하고 결과와 함께 약속을 반환하는 페이로드 생성기 콜백만 제공하면 됩니다.
그 대가로 createAsyncThunk는 반환한 프로미스와 리듀서에서 처리할 수 있는 액션 타입을 기반으로
올바른 액션을 처리하는 썽크를 제공합니다.
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'
// First, create the thunk
const fetchUserById = createAsyncThunk(
'users/fetchByIdStatus',
async (userId, thunkAPI) => {
const response = await userAPI.fetchById(userId)
return response.data
}
)
// Then, handle actions in your reducers:
const usersSlice = createSlice({
name: 'users',
initialState: { entities: [], loading: 'idle' },
reducers: {
// standard reducer logic, with auto-generated action types per reducer
},
extraReducers: (builder) => {
// Add reducers for additional action types here, and handle loading state as needed
builder.addCase(fetchUserById.fulfilled, (state, action) => {
// Add user to the state array
state.entities.push(action.payload)
})
},
})
// Later, dispatch the thunk as needed in the app
dispatch(fetchUserById(123))
썽크 액션 생성자는 페이로드 작성자 콜백에 첫 번째 인수로 전달되는 단일 인수를 허용합니다. 페이로드 생성자는 또한 일반적으로 표준 Redux 썽크 함수에 전달되는 매개변수가 포함된 thunkAPI 개체와 자동 생성된 고유한 임의 요청 ID 문자열 및AbortController.signal object를 받습니다.
interface ThunkAPI {
dispatch: Function
getState: Function
extra?: any
requestId: string
signal: AbortSignal
}
페이로드 콜백 내에서 필요에 따라 이들 중 하나를 사용하여 최종 결과를 결정할 수 있습니다.
Redux 없이 단독으로 사용할 수 있지만 매우 일반적으로Redux와 함께사용됩니다. 일반적인 사용법은 API 응답에서 컬렉션을 형식화한 다음 리듀서에서 처리하는 것입니다.
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { normalize, schema } from 'normalizr'
import userAPI from './userAPI'
const userEntity = new schema.Entity('users')
export const fetchUsers = createAsyncThunk('users/fetchAll', async () => {
const response = await userAPI.fetchAll()
// Normalize the data before passing it to our reducer
const normalized = normalize(response.data, [userEntity])
return normalized.entities
})
export const slice = createSlice({
name: 'users',
initialState: {
ids: [],
entities: {},
},
reducers: {},
extraReducers: (builder) => {
builder.addCase(fetchUsers.fulfilled, (state, action) => {
state.entities = action.payload.users
state.ids = Object.keys(action.payload.users)
})
},
})
직접 작성한 버전과 마찬가지로 이것은 상태에 항목을 추가하거나 나중에 업데이트하는 것을 처리하지 않습니다. 수신된 모든 항목을 로드하는 것뿐입니다.
createEntityAdapter와 함께 정규화
Redux Toolkit의 createEntityAdapter API는 컬렉션을 가져와
{ ids: [], entities: {} } 형태로
데이터를 슬라이스에 저장하는 표준화된 방법을 제공합니다.
이 미리 정의된 상태 모양과 데이터를 갖고 작업하는 방법을 알고 있는 일련의 리듀서 함수 및 셀렉터를 생성합니다.
import {
createSlice,
createAsyncThunk,
createEntityAdapter,
} from '@reduxjs/toolkit'
import userAPI from './userAPI'
export const fetchUsers = createAsyncThunk('users/fetchAll', async () => {
const response = await userAPI.fetchAll()
// In this case, `response.data` would be:
// [{id: 1, first_name: 'Example', last_name: 'User'}]
return response.data
})
export const updateUser = createAsyncThunk('users/updateOne', async (arg) => {
const response = await userAPI.updateUser(arg)
// In this case, `response.data` would be:
// { id: 1, first_name: 'Example', last_name: 'UpdatedLastName'}
return response.data
})
export const usersAdapter = createEntityAdapter()
// By default, `createEntityAdapter` gives you `{ ids: [], entities: {} }`.
// If you want to track 'loading' or other keys, you would initialize them here:
// `getInitialState({ loading: false, activeRequestId: null })`
const initialState = usersAdapter.getInitialState()
export const slice = createSlice({
name: 'users',
initialState,
reducers: {
removeUser: usersAdapter.removeOne,
},
extraReducers: (builder) => {
builder.addCase(fetchUsers.fulfilled, usersAdapter.upsertMany)
builder.addCase(updateUser.fulfilled, (state, { payload }) => {
const { id, ...changes } = payload
usersAdapter.updateOne(state, { id, changes })
})
},
})
const reducer = slice.reducer
export default reducer
export const { removeUser } = slice.actions
CodeSandbox에서 이 예제 사용법의 전체 코드를 볼 수 있습니다.
정규화 라이브러리와 함께 createEntityAdapter 사용하기
normalizr 또는 다른 normalization 라이브러리를 이미 사용하고 있다면
createEntityAdapter와 함께 사용하는 것을 고려할 수 있습니다.
위의 예를 확장하기 위해 normalizr을 사용하여 페이로드를 포맷한 다음
createEntityAdapter가 제공하는 유틸리티를 활용하는 방법을 보여줍니다.
기본적으로 setAll, addMany 및 upsertMany CRUD 메서드는 엔터티 배열을 예상합니다.
그러나 대안으로 { 1: { id: 1, ... }} 형태의 객체를 전달할 수도 있으므로
사전에 정규화된 데이터를 더 쉽게 삽입할 수 있습니다.
// features/articles/articlesSlice.js
import {
createSlice,
createEntityAdapter,
createAsyncThunk,
createSelector,
} from '@reduxjs/toolkit'
import fakeAPI from '../../services/fakeAPI'
import { normalize, schema } from 'normalizr'
// Define normalizr entity schemas
export const userEntity = new schema.Entity('users')
export const commentEntity = new schema.Entity('comments', {
commenter: userEntity,
})
export const articleEntity = new schema.Entity('articles', {
author: userEntity,
comments: [commentEntity],
})
const articlesAdapter = createEntityAdapter()
export const fetchArticle = createAsyncThunk(
'articles/fetchArticle',
async (id) => {
const data = await fakeAPI.articles.show(id)
// Normalize the data so reducers can load a predictable payload, like:
// `action.payload = { users: {}, articles: {}, comments: {} }`
const normalized = normalize(data, articleEntity)
return normalized.entities
}
)
export const slice = createSlice({
name: 'articles',
initialState: articlesAdapter.getInitialState(),
reducers: {},
extraReducers: (builder) => {
builder.addCase(fetchArticle.fulfilled, (state, action) => {
// Handle the fetch result by inserting the articles here
articlesAdapter.upsertMany(state, action.payload.articles)
})
},
})
const reducer = slice.reducer
export default reducer
// features/users/usersSlice.js
import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'
import { fetchArticle } from '../articles/articlesSlice'
const usersAdapter = createEntityAdapter()
export const slice = createSlice({
name: 'users',
initialState: usersAdapter.getInitialState(),
reducers: {},
extraReducers: (builder) => {
builder.addCase(fetchArticle.fulfilled, (state, action) => {
// And handle the same fetch result by inserting the users here
usersAdapter.upsertMany(state, action.payload.users)
})
},
})
const reducer = slice.reducer
export default reducer
// features/comments/commentsSlice.js
import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'
import { fetchArticle } from '../articles/articlesSlice'
const commentsAdapter = createEntityAdapter()
export const slice = createSlice({
name: 'comments',
initialState: commentsAdapter.getInitialState(),
reducers: {},
extraReducers: (builder) => {
builder.addCase(fetchArticle.fulfilled, (state, action) => {
// Same for the comments
commentsAdapter.upsertMany(state, action.payload.comments)
})
},
})
const reducer = slice.reducer
export default reducer
CodeSandbox에서 이 예제 사용법의 전체 코드를 볼 수 있습니다.
createEntityAdapter와 함께 selector 사용하기
엔티티 어댑터는 가장 일반적인 셀렉터를 생성하는 셀렉터 팩토리를 제공합니다. 위의 예를 사용하여 다음과 같이 usersSlice에 셀렉터를 추가할 수 있습니다.
// Rename the exports for readability in component usage
export const {
selectById: selectUserById,
selectIds: selectUserIds,
selectEntities: selectUserEntities,
selectAll: selectAllUsers,
selectTotal: selectTotalUsers,
} = usersAdapter.getSelectors((state) => state.users)
컴포넌트에서 이러한 셀렉터를 사용할 수 있습니다.
import React from 'react'
import { useSelector } from 'react-redux'
import { selectTotalUsers, selectAllUsers } from './usersSlice'
import styles from './UsersList.module.css'
export function UsersList() {
const count = useSelector(selectTotalUsers)
const users = useSelector(selectAllUsers)
return (
<div>
<div className={styles.row}>
There are <span className={styles.value}>{count}</span> users.{' '}
{count === 0 && `Why don't you fetch some more?`}
</div>
{users.map((user) => (
<div key={user.id}>
<div>{`${user.first_name} ${user.last_name}`}</div>
</div>
))}
</div>
)
}
대체 ID 필드 지정
기본적으로 createEntityAdapter는 데이터의 entity.id 필드에 고유 ID가 있다고 가정합니다. 데이터 세트가 해당 ID를 다른 필드에 저장하는 경우 적절한 필드를 반환하는 selectId 인수를 전달할 수 있습니다.
// In this instance, our user data always has a primary key of `idx`
const userData = {
users: [
{ idx: 1, first_name: 'Test' },
{ idx: 2, first_name: 'Two' },
],
}
// Since our primary key is `idx` and not `id`,
// pass in an ID selector to return that field instead
export const usersAdapter = createEntityAdapter({
selectId: (user) => user.idx,
})
엔터티 정렬하기
createEntityAdapter는 상태의 ID 컬렉션을 정렬하는 데 활용할 수 있는 sortComparer 인수를 제공합니다. 이것은 정렬 순서를 보장하고 데이터가 미리 정렬되지 않은 경우에 매우 유용할 수 있습니다.
// In this instance, our user data always has a primary key of `id`, so we do not need to provide `selectId`.
const userData = {
users: [
{ id: 1, first_name: 'Test' },
{ id: 2, first_name: 'Banana' },
],
}
// Sort by `first_name`. `state.ids` would be ordered as
// `ids: [ 2, 1 ]`, since 'B' comes before 'T'.
// When using the provided `selectAll` selector, the result would be sorted:
// [{ id: 2, first_name: 'Banana' }, { id: 1, first_name: 'Test' }]
export const usersAdapter = createEntityAdapter({
sortComparer: (a, b) => a.first_name.localeCompare(b.first_name),
})
액션이나 상태에서 직렬화할 수 없는 값을 감지할 때마다 자동으로 경고합니다. 실수로 직렬화 불가능한 값을 상태에 넣지 하지 않도록 이 미들웨어를 활성 상태로 두는 것이 좋습니다. 그러나 이러한 경고를 해제해야 하는 경우 특정 액션 타입 또는 액션 및 상태의 필드를 무시하도록 설정하여 미들웨어를 사용자 지정할 수 있습니다.
configureStore({
//...
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
// Ignore these action types
ignoredActions: ['your/action/type'],
// Ignore these field paths in all actions
ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
// Ignore these paths in the state
ignoredPaths: ['items.dates'],
},
}),
})
Redux-Presist 사용하기
Redux-Persist를 사용하는 경우 직렬화 가능성 검사 미들웨어에 무시할 모든 액션 타입을 특정해야 합니다.
