[React] Redux 사용하기

Redux

https://www.npmjs.com/package/redux

redux

 

Redux란 자바스크립트에서 상태를 관리하기 위한 라이브러리이다.

React에서 컴포넌트트 자체적으로 상태를 가지고 있고, props를 통해서 컴포넌트의 상태를 전달할 수 있지만,

앱이 커지면서 여러 컴포넌트가 분산되면 이를 관리하기가 어려워진다.

 

이 때 Redux를 사용하면 상태들을 한 곳에 모아 중앙 집중식으로 관리할 수 있게 된다.

 

기본적인 사용법

// counterSlice.js

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

const counterSlice = createSlice({
  name: 'counter', // slice의 이름 (action type 접두어로도 쓰임)
  initialState: { value: 0 }, // 초기 상태
  reducers: {
    increment: (state) => {
      state.value += 1; // immer 라이브러리를 써서 불변성 걱정 없이 직접 수정 가능
    },
    decrement: (state) => {
      state.value -= 1;
    },
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

createSlice()는 상태 관리에 필요한 액션(Action)과 리듀서(Reducer)를 한 번에 만들어주는 함수이다.

위 코드에서는 couterSlice를 통해 reducer에 increment, decrement가 정의되었다.

 

// store.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

위와 같이 만들어진 reducer들은 모두 하나의 파일에서 관리된다.

위 코드에서는 store.js에서 관리를 하고 있으며, configureStore()내에 관리할 reducer들을 넣어주면 된다.

 

// Main.js

<Provider store={store}>
  <App />
</Provider>

store를 사용하기 위해서는 실행되는 App을 <Provider store={store}>으로 감싸주어야 한다.

 

// App.jsx

const dispatch = useDispatch();
const count = useSelector(state => state.counter.value);

<button onClick={() => dispatch(increment())}>+1</button>

이제 어디서든 counterReducer를 통해 increment, decrement를 사용할 수 있게 되었다.

Dispatch를 통해 Action을 Store에 보낼 수 있고, Selector를 통해 Store에서 상태를 가져올 수 있다.

위에서는 disapatch(increment())를 통해 카운터를 증가시키는 increment() Action을 보내고 있고,

count 값을 통해 Store에서 상태를 가져오게 된다.