Redux Toolkit 사용!

최근에 처음으로 Redux Toolkit을 사용해 봤습니다!
그럼 이번엔 Redux Toolkit에 대한 비망록을 정리하고 싶습니다!
※ 자신이 사용하는 함수 등만 처리하기 때문에 전체를 포괄하는 것은 아닙니다.양해 부탁드립니다.

라이브러리 정보

레드ux란 무엇인가?

우선 Redux가 무엇인지 미리 기재해 두세요.
state를 관리하고 업데이트하는 것은 이른바'상태 관리'라이브러리 중의 하나이다.
state를 업데이트할 때 디스패치 함수를 사용하여 액션을 Reducter에 보내고 액션의 type에 따라 처리합니다.

Redux Toolkit이란?

다음은 Redux Toolkit에 대한 설명입니다.
Redux Toolkit은 Redux를 쉽게 처리할 수 있는 라이브러리입니다.
Redux를 단독으로 사용하는 것보다 간단하게 기술할 수 있습니다.
Redux를 처리하는 표준 수단이 되는 것을 목표로 하여 Redux 공식에서 사용하는 것을 추천합니다.
자세한 내용은 아래 페이지를 보십시오.상술한 설명도 이 페이지를 기초로 한다.
Redux 공식 문서 What is Redux Toolkit?

React Redux란 무엇입니까?

마지막으로 React Redux에 대해 살펴보겠습니다.
React Redux는 React와 Redux를 연결하는 프로그램 라이브러리입니다.
Redux 자체는 React가 아니어도 사용할 수 있지만 React Redux는 React를 전문적으로 겨냥한 것이다.Redux와 함께 사용합니다.
자세한 내용은 아래 페이지를 보십시오.상술한 설명도 이 페이지를 기초로 한다.
React Redux 공식 문서 Why Use React Redux?

Redux Toolkit을 사용한 상태 관리 준비

그러면 레드ux Toolkit을 이용한 상태 관리에 필요한 것들을 소개한다.

store

우선, 스토어에 대해서.
store는 state를 통일적으로 관리하는 대상입니다.configureStore 함수를 사용하여 Reducter나middleware를 한데 모은 대상을 매개 변수로 전달합니다.
리듀서를 여러 개 낼 수도 있어요.
예를 들면 다음과 같습니다.

export const store = configureStore({
    reducer: {
        todo: todoSlice
    }
});

또한 Type Script를 사용할 때 state의 유형은 다음과 같습니다.RootState 유형을 정의했지만 함수 반환값을 사용하는 유형ReturnType.
다음의 경우 getState 함수는store가 관리하는state에 접근하여 typeof로 되돌아온state의 유형을 생성합니다.

export type RootState = ReturnType<typeof store.getState>;

slice

createSlice 함수를 사용하여 Reducter와state에 대응하는 동작을 만들고 관리할 수 있습니다.
예를 들면 다음과 같습니다.

const todoSlice = createSlice({
    name: 'todos',
    initialState, // stateの初期値
    reducers: {
        addToDo: (state, action) => {
            let id;
            if (state.todos.length === 0) {
                id = 0;
            } else {
                id = state.todos[state.todos.length - 1].id + 1;
            }

            state.todos = [...state.todos, {id: id, title: action.payload, status: false}];
        }
    }
});

// Action Creatorをexport
export const { addToDo } = todoSlice.actions;

// reducerをexport
export default todoSlice.reducer;

reducers에서 Reducter를 정의했습니다.Reducters 대상의 키 이름과 name를 사용하여 액션 type을 생성합니다.상술한 예의 type은todos/addToDo이다.Action Creator는 Reducters 객체キー名()입니다.
지금까지 Reducter는 switch문을 사용했고 action의 type에 따라 지점을 처리했지만 createSlice 함수를 이용하여 switch문의 지점을 사용하지 않고 처리를 Reducters 대상의 속성으로 집합하여 이해하기 쉽습니다!

state 업데이트 with React Redux!

이어 지금까지 제작된 리듀서 등을 활용해 실제 스테이트를 업데이트하는 방법을 소개한다.
그런 다음 React Redux의 API가 사용됩니다.

Provider

Provider 구성 요소를 사용하면 모든 구성 요소에서store를 사용할 수 있습니다!
예를 들면 다음과 같이 사용한다.

root.render(
    <Provider store={store}>
        <App />
    </Provider>
)

Hooks

React Redux에서는 어셈블리와 store의 관계를 설정하기 위한 APIhooks가 준비되어 있습니다.
state 업데이트에서 이 hooks API를 사용합니다.

useSelector

useSelector()store에서state를 꺼냅니다.
예를 들면 다음과 같습니다.

// useSelector()を使って、stateを取り出してくる。
const todo = useSelector((state: RootState) => state.todo.todos);

return (
    <ul>
        {todo.map((item) => {
            return ( 
                <li key={item.id}>{item.title}</li>
            )
        })}
    </ul>
)

useDispatch

useDispatch 함수의 인용을 되돌려줍니다.dispatch 함수를 사용할 수 있도록 합니다.
이 기능을 사용하면 매개변수에 Action Creator를 전달하여state 업데이트에 연결할 수 있습니다.
예를 들면 다음과 같습니다.
※ 양식은 React Hook Form을 사용합니다.

const dispatch = useDispatch();

const { register, handleSubmit } = useForm<inputForm>();

const onSubmit: SubmitHandler<inputForm> = (data) => {
    // dispatch()の引数に、Action CreatorであるaddToDo()を渡している。
    dispatch(addToDo(data.todo));
};

return (
    <form onSubmit={handleSubmit(onSubmit)}>
        <label>Task：</label>
        <input { ...register("todo")} />
        <input type="submit" />
    </form>
);

끝말

레드ux의 용어는 복잡해서 이해하기 어렵다.
하지만 Redux Toolkit을 통해 Redux의 조작이 상당히 쉬워질 것이라는 것을 절감했습니다!
만약 인식상의 오류, 보충 등이 있다면 반드시 댓글을 남겨주세요~!
읽어주셔서 감사합니다!

참고 자료

Redux 공식 문서
Redux Toolkit 공식 문서
React Redux 공식 문서
[Type Script] Utility Type의 ReturnType을 잘 이해합니다.
React 초보자도 읽으면 꼭 알 수 있는 Redux 강좌.
Redux 입문자를 위한 첫 번째 Redux Toolkit 및 Redux Thunk 비동기 처리
크리에이트 슬라이스로 액션과 Reducter를 쉽게 관리하세요.
레드ux를 알기 쉽게 설명해 봤습니다.

참고 문헌

안녕(오카다 타쿠사) 저서'현대 자바스크립트의 기본부터 시작하는 리액트 실천 교과서'(2021)