[Redux] Redux 기본 개념.zip

안녕! 하세요 >.< 오늘은 오로지 저를 위해 redux 관련 개념들을 정리해보려고 합니다
리액트 공부를 시작하면서 redux도 살짝 맛보고 있는데 개념들이 넘 헷갈리네요
볼 때마다 새로워요
아무튼 redux 사용하기 전에는 props로 컴포넌트에게 값을 전달하는 형태를 주로 사용했는데, 리덕스를 사용하니까 컴포넌트에서 필요할 때마다 스토어에 접근해서 바로 사용할 수 있어서 좋더라구요
그래도 아직 어려운 건 마찬가지네요(?)

Redux 기본 키워드

1. Store

• 프로젝트에서 사용하는 모든 동적 데이터들을 담아두는 곳
• state의 관리를 하는 전용 장소로, state들이 객체 형식으로 저장됩니다
• store 생성 예제
  • store를 만들 때에는 createStore()를 사용하며, reducer가 파라미터로 사용됩니다

import {createStore} from "redux";

const store = createStore(reducers, composeWithDevTools());

• store 연동 예제
  • provider 컴포넌트로 연동할 컴포넌트를 감싸준 다음, provider 컴포넌트의 props로 위에서 생성한 store를 전달해주면 됩니다
  • 우리가 렌더링하는 모든 컴포넌트는 redux store에 접근 할 수 있게 됩니다.

function App() {
    return (
      <Provider store={store}>
        <BrowserRouter>
            <Routes>
              <Route path="/" element={<Main />}/>
            </Routes>
        </BrowserRouter>
      </Provider>
    )
}

2. Subcribe

• store 값이 바뀔 때마다 호출
• dispatch가 실행될 때마다 subscribe에 전달된 함수가 호출됩니다
• subscribe 사용 예제

store.subscribe(() => console.log(store.getState()));
// 현재 state 값이 출력됩니다 

3. Action

• state 변경이 이루어질 수 있게 하는 것
• 모든 action은 type이라는 값을 필수적으로 지니고 있어야 합니다
• action은 dispatch 함수를 통해 reducer로 전달됩니다
• Action 객체 생성 예제

// action type
export const ADD_TO_LIST = 'ADD_TO_LIST'

// action 생성 함수
export const addToList = (item: any) => ({
    type: ADD_TO_LIST,
    item
  // 액션과 함께 전달되어야 할 값이 있을 경우 추가로 정의해줍니다 
})

• 아래 예시처럼 Action 타입만 따로 관리하는 파일을 만들어서 저장하면 조금 더 편합니다

// ActionType.js
// 액션 타입은 주로 대문자로 작성합니다 

const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const ADD_TO_LIST = 'ADD_TO_LIST';

4. Dispatch

• 발생한 action을 reducer로 전달합니다
• redux에서 상태 변경을 일으킬 수 있는 유일한 방법입니다
• dispatch 사용 예제

import {useDispatch} from "react-redux";

const dispatch = useDispatch();
...
axios(config)
	.then(function (response) {
    	dispatch(addToList(response.data));
    })
...

5. Reducer

• 정해진 로직에 의해 action을 처리한 후 새로운 상태 값을 반환합니다
• state와 state를 변경시킬 action이 필요합니다
• reducer 파일에는 초기 상태가 정의되어있어야 합니다 (초기 상태가 꼭 객체 타입일 필요는 없습니다)
• reducer 사용 예제

// 액션을 불러옵니다 
import {ADD_TO_LIST} from "./Action";

// 초기 상태를 정의합니다 
const initialState = {
    list: []
}

// action type에 따라 state를 변경합니다 
function reducers(state: list | undefined = initialState, action) {
        switch (action.type) {
            case ADD_TO_LIST:
                return {list: action.item}
            default:
                return state
        }
}

• reducer 관련 메소드
  • combineReducers: 많은 Reducer들을 하나로 합쳐 하나의 Reducer로 관리할 수 있게 해줍니다. 합쳐진 reducer를 root reducer라고 합니다.

주의할 점

우리는 절대 state를 직접 변경하면 안됩니다. getState()로 현재 state를 가져올 수는 있지만 state에 직접 접근해서 변경하는 것은 불가능합니다.
따라서 기존 state 값을 변형하는 것이 아닌, 새로운 state를 생성하는 방식을 사용해야 합니다.

6. Redux Module

• redux module은 Action type, Action 생성 함수, reducer가 모두 들어있는 파일입니다
• 이처럼 reducer와 action 관련 함수들을 하나의 파일로 작성하는 것을 Ducks 패턴이라고 합니다
• 위의 예시 코드들을 Ducks 패턴으로 작성하면 아래와 같습니다

// action type 선언 
const ADD_TO_LIST = 'ADD_TO_LIST'

// action 생성 함수
export const addToList = (item: any) => ({
    type: ADD_TO_LIST,
    item
})

// 초기 상태 선언
const initialState = {
    list: []
}

export default function reducers(state: list | undefined = initialState, action) {
        switch (action.type) {
            case ADD_TO_LIST:
                return {list: action.item}
            default:
                return state
        }
}

7. 정리

위의 내용들을 한 줄로 요약하자면,
user가 특정 action을 실행시키면 dispatch 함수를 통해 action이 reducer에게 전달되고, reducer 함수에 정의된대로 state 값이 업데이트된 후 store에 저장됩니다

마치며 🐥

리덕스 아직 많이 사용해보진 않았지만 되게 편리한 것 같네요 (?)
아직 모르는게 더 많아서 틀린 내용이 있을 수 있으니 열심히 지적해주세요
끗