@reduxjs/toolkit- Redux 사용 편리하게 만드는 공식 라이브러리

Redux는 상태 관리를 위한 강력한 라이브러리지만, 설정이나 코드량이 많아 사용하기에 번거로울 수 있습니다. @reduxjs/toolkit은 이러한 불편함을 해소하고 Redux 코드를 간소화하기 위해 만들어졌습니다.

@reduxjs/toolkit이 제공하는 주요 기능은 다음과 같습니다:

1. configureStore: Redux 스토어를 쉽게 설정할 수 있는 함수를 제공합니다.
2. createSlice: 리듀서와 액션을 한 번에 정의할 수 있는 함수입니다. 보일러플레이트 코드를 최소화하여 코드를 간결하게 작성할 수 있습니다.
3. createAsyncThunk: 비동기 작업을 처리하기 위한 유틸리티 함수를 제공합니다.
4. createReducer: 리듀서를 쉽게 작성할 수 있도록 도와주는 함수입니다.

@reduxjs/toolkit은 Redux를 더 쉽게 사용할 수 있도록 하기 위해 여러 가지 도구와 기능을 제공하며, 특히 프로젝트의 규모가 커질수록 이점이 두드러집니다. 이 라이브러리를 사용하면 Redux를 보다 효율적으로 활용할 수 있습니다.

따라서, @reduxjs/toolkit을 사용하기 위해서는 해당 패키지를 설치해야 합니다. 설치 명령어는 다음과 같습니다:

 

 

리듀서: 

 

리덕스(Redux)에서 리듀서(Reducer)는 상태 변화를 일으키는 함수입니다. 리덕스는 상태를 관리하는 라이브러리로서, 애플리케이션의 상태를 불변하게 관리하고 상태 변경을 예측 가능한 방식으로 처리하는 데 주로 사용됩니다.

리듀서의 주요 역할은 현재 상태와 액션(Action)을 받아서 새로운 상태를 반환하는 것입니다. 간단하게 말하면, 이전 상태와 액션을 이용하여 다음 상태를 계산하는 함수입니다.

리듀서 함수의 형태는 다음과 같습니다:

 

function reducer(state, action) {
  // 이전 상태(state)와 액션(action)을 이용하여 새로운 상태를 계산
  // 새로운 상태를 반환
}

 

 

여기서 state는 현재 상태이고, action은 수행하려는 작업을 나타내는 객체입니다. 액션에는 어떤 종류의 작업을 할 것인지를 나타내는 type 속성과 함께 다른 속성들이 포함될 수 있습니다.

리듀서는 순수 함수(pure function)로 작성되어야 합니다. 즉, 같은 입력에 대해서는 항상 같은 출력을 내보내야 하며, 외부의 상태를 변경하거나 외부의 데이터에 의존해서는 안 됩니다.

Redux에서 @reduxjs/toolkit의 createSlice 함수를 사용하면 리듀서를 더 편리하게 생성할 수 있습니다. createSlice를 사용하면 상태와 관련된 액션 및 리듀서를 한 번에 정의할 수 있습니다. 이렇게 함으로써 반복적인 코드 작성을 줄이고 가독성을 향상시킬 수 있습니다.

 

 

import { createSlice } from "@reduxjs/toolkit";

//first object 생성

//payload = new product

//toolkit에서만 이렇게 가능

const cartSlice = createSlice({

    name: "cart",

    initialState:{

        products: [],

        quantity: 0,

        total: 0,

    },

    reducers: {

        addProduct: (state, action) => {

            state.quantity += 1;

            state.products.push(action.payload.product)

            state.total += action.payload.price;

        }

    }

})

 

 

 

Redux는 React 애플리케이션의 전역 상태를 효율적으로 관리하기 위한 상태 관리 라이브러리입니다. Redux를 사용하면 애플리케이션의 여러 컴포넌트에서 공유되는 상태를 중앙에서 효과적으로 관리할 수 있습니다.

Redux의 핵심 개념은 다음과 같습니다:

1. Store: 애플리케이션의 상태를 저장하는 객체입니다. 모든 상태는 하나의 스토어에 저장되며, 스토어는 Redux 라이브러리에서 제공하는 함수를 사용하여 생성됩니다.
2. Action: 애플리케이션에서 스토어로 데이터를 보내는 방법입니다. 어떤 일이 발생했을 때 애플리케이션에서 스토어로 전달되는 데이터 조각입니다. 예를 들면 "장바구니에 상품 추가"나 "로그인" 같은 동작들이 액션입니다.
3. Reducer: 액션을 기반으로 상태를 어떻게 변경할지 정의하는 함수입니다. 액션이 전달되면 리듀서는 현재 상태와 액션을 참조하여 새로운 상태를 반환합니다.
4. Dispatch: 스토어에서 제공하는 함수로, 액션을 전달하여 상태 변경을 시작합니다. 디스패치 함수를 사용하여 액션을 스토어로 보냅니다.
5. Connect: React 컴포넌트를 Redux 스토어에 연결하는 함수입니다. 컴포넌트에서 스토어의 상태를 읽거나 디스패치 함수를 호출할 수 있게 해줍니다.

Redux를 사용하면 컴포넌트 간에 상태를 전파하지 않고도 중앙에서 상태를 관리할 수 있으므로, 여러 컴포넌트 간의 데이터 공유 및 상태 관리가 용이해집니다.

간단한 예시를 통해 설명하겠습니다. 아래는 Redux의 구조를 간단히 표현한 것입니다:

 

 

// 액션 타입 정의

const ADD_TO_CART = 'ADD_TO_CART';

// 액션 생성자 함수

const addToCart = (product) => ({

  type: ADD_TO_CART,

  payload: product,

});

// 초기 상태 및 리듀서 정의

const initialState = {

  cart: [],

};

const cartReducer = (state = initialState, action) => {

  switch (action.type) {

    case ADD_TO_CART:

      return {

        ...state,

        cart: [...state.cart, action.payload],

      };

    default:

      return state;

  }

};

// 스토어 생성

const { createStore } = require('redux');

const store = createStore(cartReducer);

// 컴포넌트에서 디스패치를 이용해 액션 발생

store.dispatch(addToCart({ id: 1, name: 'Product 1' }));

// 스토어의 상태 확인

console.log(store.getState());

 

 

이런 식으로 Redux를 이용하여 장바구니에 상품을 추가하고, 스토어의 상태를 통해 전역적으로 상태를 관리할 수 있습니다. 이러한 전역 상태 관리가 복잡한 애플리케이션에서 유용하게 사용됩니다.

 

 

 

 

액션 생성자 함수는 리덕스에서 액션을 생성하는 함수입니다. 액션은 어떤 변화가 일어났는지 알리는 일종의 이벤트 객체로, 상태를 변경하기 위해 사용됩니다. 액션 생성자 함수는 액션 객체를 반환하며, 이 객체는 type이라는 필수 속성을 가지고 있습니다.

리덕스에서 직접 액션 객체를 생성하는 대신, 액션 생성자 함수를 사용하는 이유는 여러 가지 있습니다:

1. 일관성 유지: 액션 생성자 함수를 사용하면 액션 객체의 구조를 일관성 있게 유지할 수 있습니다. type 속성을 갖는 일반적인 구조를 액션 생성자 함수에서 관리하면 실수를 줄이고 코드를 관리하기 쉽게 만듭니다.
2. 재사용성: 액션 생성자 함수를 사용하면 동일한 액션을 여러 곳에서 사용할 수 있습니다. 만약 액션 객체의 구조를 변경해야 할 경우, 액션 생성자 함수만 수정하면 되므로 유지보수가 편리해집니다.
3. 가독성 향상: 액션 생성자 함수는 액션이 어떤 용도로 사용되는지 명시적으로 표현할 수 있습니다. 함수의 이름 자체가 액션의 의미를 나타내므로 코드를 읽고 이해하기 쉽습니다.
4. 편의성: 액션 생성자 함수를 사용하면 액션을 생성하는 과정이 간단해집니다. 필요한 액션을 생성하려면 함수를 호출하기만 하면 되므로 코드를 간결하게 유지할 수 있습니다.

요약하면, 액션 생성자 함수는 액션을 생성하는 일반적인 방법으로, 코드의 일관성, 재사용성, 가독성, 편의성 등을 향상시키기 위해 사용됩니다.

 

 

초기상태는 리듀서가 처음 호출될 때 사용된다.

 

Redux에서는 반드시 초기 상태를 먼저 정의해주어야 합니다. 초기 상태는 애플리케이션의 상태를 나타내며, 리듀서가 처음 호출될 때 사용됩니다. 리덕스 스토어를 생성할 때 초기 상태를 제공해야 합니다.