redux 정리

리덕스(Redux)의 동작 순서도는 상태 관리의 흐름을 단계별로 나타냅니다.

이를 통해 dispatch, action, reducer, 그리고 store 간의 상호작용을 명확하게 이해할 수 있습니다. 아래에 Redux의 기본 흐름을 순서도 형태로 설명할게요.

Redux의 동작 순서도

1. 사용자 이벤트 발생
   • 예를 들어, 버튼 클릭, 텍스트 입력 등과 같은 이벤트가 발생합니다. 이 이벤트는 리덕스 상태를 변경할 필요가 있는 동작을 유발합니다.
2. 컴포넌트에서 dispatch 호출
   • 사용자가 상호작용을 하면, React 컴포넌트 내에서 dispatch를 호출합니다.
   • dispatch는 액션 객체를 리덕스 스토어로 전달합니다.
   • 버튼을 눌렀을때 액션이 발생되기 때문에  그 액션을 전달해주는 함수 dispatch를 사용한다
   • <button onClick(()=>{dispatch(increment())})

     

3. @reduxjs/toolkit**은 리덕스를 더 쉽게 사용하고 효율적으로 만들기 위한 도구와 유틸리티 함수를 제공

 

 

increment()는 액션 생성자 함수이고, dispatch()는 이 액션을 리덕스 스토어로 전송하는 함수입니다.

리덕스 스토어는 이 액션 객체를 받아서, 리듀서에 의해 새로운 상태를 계산하고, 그 상태를 업데이트

 

 

**디스패치(dispatch)**를 사용할 때, 그 안에 있는 액션 생성자가 리덕스 스토어에 액션을 보내고,

리듀서가 그 액션을 처리하는 방식입니다.

 

이 과정에서 액션 객체에는 type과 (선택적으로) payload가 포함되며, 그 액션 객체가 리덕스 스토어에 전달되고, 리듀서에서 이 액션을 바탕으로 상태를 업데이트합니다.

 

dispatch(increment())에서 increment()는 액션 생성자(Action Creator)입니다. 그리고 increment()는 함수입니다.

이 함수는 액션 객체를 반환

1. type:

• **type**은 액션의 종류를 나타내는 문자열입니다.
• 액션 객체의 type을 사용하여, 리듀서에서 어떤 액션을 처리할지 결정합니다.
• 예: 'increment', 'decrement' 등

2. payload:

• **payload**는 액션에 관련된 데이터입니다. 리듀서가 상태를 변경하는 데 필요한 정보를 담고 있습니다.
• 예를 들어, 카운트를 증가시키는 액션에서는 payload에 증가할 값을 담을 수 있습니다.
• **payload**는 액션 객체 안에 들어가는 데이터 또는 인자입니다. 'increment(2) 괄호 안의 함수 인자'
• 액션 생성자 함수에서 payload는 함수 인자처럼 전달됩니다.

Redux Slice는 상태와 그 상태를 변경할 수 있는 함수를 한 곳에서 정의하는 구조입니다.

리덕스 툴킷에서 createSlice를 사용하여 **상태(state)**와 **상태를 변경하는 함수(reducer)**를 함께 관리할 수 있습니다.

 

reateSlice로 만드는 것:

1. 상태(state): 초기 상태를 정의합니다.
2. 리듀서 함수(reducers): 이 함수들은 상태를 변경하는 로직을 포함합니다. 즉, 액션을 받아서 상태를 어떻게 변경할지 정의합니다.
3. 액션 생성자(actions): 리듀서 함수들이 자동으로 액션 생성자로 변환됩니다. 이 액션 생성자는 디스패치할 수 있는 액션 객체를 반환합니다.

initialState는 **상태(state)**의 초기값을 정의하는 부분입니다. 이 값은 리덕스 스토어에서 상태의 시작 상태를 나타내며, 리듀서에서 해당 상태를 변경하는 로직을 정의할 때 사용

initialState가 하는 역할:

• initialState는 상태의 초기값을 설정합니다.
• 이 초기값은 리덕스 스토어에서 관리되며, 앱이 처음 실행될 때 이 값으로 상태가 설정됩니다.
• 이후 리듀서 함수를 사용해 상태를 변경할 수 있습니다.

이 상태를 useSelector로 상태를 가져온다

리덕스의 흐름도는 크게 4단계로 나눌 수 있습니다

: 액션 발생 → 디스패치 → 리듀서 처리 → 컴포넌트에 상태 반영. 이 과정을 통해 애플리케이션 상태를 일관되게 관리

   +-------------------+       dispatch         +-----------------+       반환된 새로운 상태
   |   Action 생성     |  ------------------->  |   Reducer       |  --------------------->  |   새로운 상태
   | (increment 등)    |                        |  (상태 변경)     |                         |   (컴포넌트 렌더링)
   +-------------------+                        +-----------------+                         
                                              |
                                           useSelector
                                              |
                                    +---------------------+
                                    |  React Component    |
                                    | (상태값 사용)        |
                                    +---------------------+

 

리덕스 흐름 요약:

1. 액션은 상태를 변경할 의도를 담고 있는 객체입니다.
2. 디스패치를 통해 액션을 스토어에 전달합니다.
3. 리듀서는 액션을 받아 상태를 변경하고, 새로운 상태를 리턴합니다.
4. **useSelector**를 통해 상태를 컴포넌트에서 조회하고, 상태가 변경되면 컴포넌트는 재렌더링됩니다.

리덕스는 이 과정이 일관되게 이루어져서, 상태 관리를 매우 효율적으로 할 수 있도록 도와줍니다.