[Tia 기업협업] Redux로 검색 상태관리

Redux

개발자분께 대략적인 코드리뷰를 받고나서 여러페이지에 존재하는 검색창(회원정보, 랭킹회원정보, 사전예약유저정보)의 검색값들을 페이지를 벗어나도 저장되도록 redux를 사용해 store에서 각각 관리하기로 했다.

앞서 언급했던 것처럼 페이지별 검색값을 각각 따로 관리하기 위해, modules 폴더에 filters라는 폴더를 생성해 각 filter값을 관리하는 js파일을 선언했다.

각 파일들의 내용과 구조는 동일하고 이름만 다르게 만들어줬다.

// userFilter.js

// action type
// constant
const ADD_FILTER = 'userFilter/ADD_FILTER';
const INITIALIZE_FILTER = 'userFilter/INITIALIZE_FILTER';

// action creater
export const addUserFilter = (key, value) => {
  return {
    type: ADD_FILTER,
    key: key,
    value: value,
  };
};

export const initializeUserFilter = () => {
  return {
    type: INITIALIZE_FILTER,
  };
};

// reducers
export const INITIAL_STATE = {
  level: '',
  name: '',
  nickname: '',
  email: '',
  hp: '',
  code: '',
  nation: '',
  start_at: '',
  end_at: '',
  blind: '',
};

const userFilterReducer = (prevState = INITIAL_STATE, action) => {
  switch (action.type) {
    case ADD_FILTER:
      return { ...prevState, [action.key]: action.value };

    case INITIALIZE_FILTER:
      return INITIAL_STATE;

    default:
      return prevState;
  }
};

export default userFilterReducer;

페이지에 맞는 filter 객체의 초기값을 선언해주고, reducer내 2개의 함수 로직을 만들었다. ADD_FILTER는 input창에서 값을 입력하면 onChange 속성을 통해 입력값을 filter에 추가해주는 함수이고, INITIALIZE_FILTER는 초기화버튼을 누르면 검색값을 초기상태로 돌려놓는 함수이다.

다른 페이지의 filter도 위의 로직과 동일하며, filter에 들어가는 키값만 차이가 있다. 이렇게 각 reducer를 index.js에서 rootReducers로 통합해줬다.

실제 컴포넌트에서 reducer를 불러와 적용시키는 로직은 다음과 같다.

// Search.js

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addUserFilter,initializeUserFilter } from 'modules/filters/userFilter';
import { addPreUserFilter, initializePreUserFilter } from 'modules/filters/preUserFilter';
import { addRankUserFilter, initializeRankUserFilter } from 'modules/filters/rankUserFilter';
//중략

const Search = ({
  className,
  fetchData,
  setCurrentPage,
  searchMenus,
  column,
  page,
}) => {

  const dispatch = useDispatch();
  const addToFilter = (key, value, page) => {
    switch (page) {
      case 'userinfo':
        dispatch(addUserFilter(key, value));
        break;

      case 'preuser':
        dispatch(addPreUserFilter(key, value));
        break;

      case 'rankuser':
        dispatch(addRankUserFilter(key, value));
        break;

      default:
        break;
    }
  };
  const initailizeFilter = (page) => {
    switch (page) {
      case 'userinfo':
        dispatch(initializeUserFilter());
        break;

      case 'preuser':
        dispatch(initializePreUserFilter());
        break;

      case 'rankuser':
        dispatch(initializeRankUserFilter());
        break;

      default:
        break;
    }
  };

  const filters = useSelector((store) => {
    switch (page) {
      case 'userinfo':
        return store.userFilter;

      case 'preuser':
        return store.preUserFilter;

      case 'rankuser':
        return store.rankUserFilter;

      default:
        return;
    }
  });

  const Inputs = (input) => {
    switch (input.type) {
      case 'input':
        return (
          <Input
            name={input.name}
            value={filters[input.name]}
            onChange={(e) => {
              addToFilter([e.target.name], e.target.value, page);
            }}
          />
        );

      case 'select':
        return (
          <Selector options={input.options} name={input.name} page={page} />
        );

      case 'nation':
        return <CountrySelector name={input.name} page={page} />;

      case 'date':
        return <DateSearch page={page} />;

      default:
        return;
    }
  };

addToFilter 함수는 input 태그 onChange 속성에 적용되는 함수로 입력하는 값으로 filter를 업데이트하는 함수다. 이때 swich구문을 통해 페이지 별로 분기처리하고, 원하는 Reducer 함수를 가져온다. 검색값을 초기화하는 함수 initializeFilter 나 filters 객체를 가져오는 로직도 이와 동일하다.