Redux 사용하기

Redux: 상태 관리 라이브러리

핵심 개념:
Store: 앱의 상태를 저장하는 중앙 저장소입니다.
Action: Store의 상태를 변경하는 요청을 나타냅니다.
Reducer: Action을 처리하고 Store의 새로운 상태를 반환하는 함수입니다.

내가 사용한 방법 > createSlice
createSlice API는 Redux에서 리듀서, 액션 생성자, 액션 타입을 간편하게 만들 수 있도록 도와주는 함수

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment(state) {
      state += 1;
    },
    decrement(state) {
      state -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions; 
//자동 생성된 actions 생성자
export default counterSlice.reducer;
//자동 생성된 reducer

Dispatch

Redux Store에 Action을 전달하여 앱 상태를 변경

dispatch 함수는 Action 객체를 Store에 전달 합니다.
Action 객체는 상태를 어떻게 변경해야 하는지에 대한 정보를 포함합니다.
Store는 Action을 받으면 Reducer 함수를 실행하여 새로운 상태를 계산합니다.
새로운 상태는 Store에 저장되고, Store에 연결된 컴포넌트는 상태 변경에 따라 다시 렌더링 됩니다.

const dispatch = useDispatch();

APP.JS

useEffect(() => {
	dispatch(setDemography({...payload...}))
},[])

app 렌더링 시 마다 setDemography action 실행하여 demography state 변경

useSelector

: Redux Strore의 상태 접근하는데 사용하는 Hook

useSelector Hook 작동 방식:

• useSelector Hook은 컴포넌트가 현재 상태에 따라 렌더링되도록 합니다.

• Store의 상태가 변경될 때마다 useSelector Hook은 컴포넌트를 다시 렌더링 합니다.

• useSelector Hook은 컴포넌트 성능을 최적화 하기 위해 메모이제이션 기능을 제공합니다.

• 함수 형식의 선택자를 인자로 받음

위에서 선언한 createSlice의 state에 접근하기 위해

const custPin = useSelector(({userSlice}) => userSlice.custPin)