React Redux

리덕스가 뭘까

리액트는 부모 자식 관계의 컴포넌트끼리 props를 주고 받을 수 있다. 그렇다면 먼 조상이나 형제, 친척 관계의 컴포넌트도 props를 주고 받을 수 있을까? 있지만 복잡하고 비효율적이다. 이때 생각할 수 있는 방법은 모든 컴포넌트가 소통할 수 있는 공동의 창고를 만들고 정보를 주고 받는 것이다. 이것이 리덕스의 개념이다.

프로젝트에서 사용했던 리덕스

내가 참여했던 프로젝트에서는 redux-toolkit 라이브러리를 사용하였다.

1. 스토어 정의

(예시)

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

const commonSlice = createSlice({
  name: 'common',
  initialState: {
    testVal: { show: false, msg: '' },
  },
  reducers: {
    setTestVal(state, { payload }) {
      const { status, msg } = payload;
      state.testVal = {
        show: status,
        msg: msg,
      };
    },
  },
});

export const { setTestVal } = commonSlice.actions;

export const commonSelector = (state) => state.common;

export default commonSlice.reducer;

2. configureStore을 통해 스토어 생성

(예시)

import { configureStore } from '@reduxjs/toolkit';
import common from './commonSlice';

export default configureStore({
  reducer: {
    common,
  },
});

3. 최상단에서 스토어 전달한다.

(예시)

// ** Redux Imports
import { Provider } from 'react-redux';
import store from 'src/store';

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

4. 컴포넌트가 스토어로 정보 전달

// ** Redux Imports
import { useDispatch } from 'react-redux';

// ** Store
const dispatch = useDispatch();

// ** dispatch를 사용하여 store에 정보를 전달한다.
dispatch(
  setTestVal({ status: true, msg: 'Hi' })
);

5. 컴포넌트가 스토어에서 정보 조회

// ** Redux Imports
import { useSelector } from 'react-redux';
import { commonSelector } from 'src/store/commonSlice';

// ** useSelector를 사용하여 store에서 정보를 조회한다.
const testVal = useSelector(commonSelector).testVal;