[React.js] Redux란? (리덕스) / 사용법

Redux란?

여러 컴포넌트가 공유하는 state를 구현하는 Node.js 패키지 ( 전역 state )

 

기본 동작 방식

1. store에 state저장

2. dispatch가 Action 이라는 이벤트 감지하고, reducer에게 Action 내용 전달

3. reducer가 Action에 맞춰 store내부 state변경

4. state 변경감지후, 필요한 화면 재렌더링

 

설치

npm i @reduxjs/toolkit
npm i -D react-redux

// typescript 사용시
npm i -D @types/react-redux

 

Redux-Toolkit이란?

configureStore() , createSlice() 등의 함수를 사용하여

기존의 Redux 코드를, 간편하고 가독성 좋게 바꿔준다.

 

store 만들기

여러 state들을 저장하는 저장소

const store = configureStore({
  reducer: // reducer 만들기
  middleware: // 미들웨어 적용하기
  devTools: // redux 개발자 도구 사용
  preloadedState: // 기본 state 지정하기
  enhancers: // 사용자 미들웨어 적용하기
})

 

slice 만들기

설정의 name에 따라서 액션 생성자, 액션 타입, 리듀서를 자동으로 생성

 ( createAction, createReducer 사용하지 않아도 됨 )

const counterSlice = createSlice({
  name: 'counter', //
  initialState, //
  reducers: { //
    serCounter(state, action) {
      state.value = action.payload;
    }
  }
});