React redux 전역 스토어 쓰는 법

영리치 0 1,520 2022.07.20 16:57

App.js

<Provider store={store}>
      <GlobalStyle />
      <Router />
    </Provider>

위처럼 감싸줌

store.js

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

let inputKeyword = createSlice({
  name: 'inputKeyword',
  initialState: { keyword: '' },
  reducers: {
    changeKeyword(state, action) {
      state.keyword = action.payload;
    },
  },
});

export let { changeKeyword } = inputKeyword.actions;

let searchModalStatus = createSlice({
  name: 'searchModalStatus',
  initialState: false,
  reducers: {
    openSearchModal() {
      return true;
    },
    closeSearchModal() {
      return false;
    },
  },
});

export let { openSearchModal, closeSearchModal } = searchModalStatus.actions;

// searchIconStatus 0:돋보기 / 1:X / 2:공백
let searchIconStatus = createSlice({
  name: 'searchIconStatus',
  initialState: 0,
  reducers: {
    switchSearchIcon(state, action) {
      return action.payload;
    },
  },
});

export let { switchSearchIcon } = searchIconStatus.actions;

export default configureStore({
  reducer: {
    inputKeyword: inputKeyword.reducer,
    searchModalStatus: searchModalStatus.reducer,
    searchIconStatus: searchIconStatus.reducer,
  },
});

위처럼 이름과 초기 상태와 상태를 수정할 수 있는 리듀서, 이름 등을 설정해줌

header.js

import { useDispatch, useSelector } from 'react-redux';
import {
  closeSearchModal,
  openSearchModal,
  switchSearchIcon,
  changeKeyword,
} from '../../../store';

위처럼 리듀서와 useDispatch, useSelectore를 임포트 해줌

let dispatch = useDispatch();
  let searchModalStatus = useSelector(state => state.searchModalStatus);
  let searchIconStatus = useSelector(state => state.searchIconStatus);

useDispatch는 리듀서 같은 수정할 수 있는 함수를 사용할 수 있는거임

useSelector는 초기 세팅임.

<Logo
            onClick={() => {
              navigate('/');
              dispatch(closeSearchModal());
              dispatch(switchSearchIcon(0));
            }}
          />

위와 같이 dispatch로 임포트한 리듀서들을 사용함.

그럼 전역 변수들이 바뀜

[
              <FiSearch
                className="SearchIcon"
                onClick={() => {
                  dispatch(openSearchModal());
                  dispatch(switchSearchIcon(1));
                  dispatch(changeKeyword());
                }}
                key="0"
              />,
              <IoClose
                className="SearchIcon"
                onClick={() => {
                  dispatch(closeSearchModal());
                  dispatch(switchSearchIcon(0));
                  dispatch(changeKeyword());
                }}
                key="1"
              />,
              <div key="3" />,
            ][searchIconStatus]

위와 같이 dispatch로 리듀서들을 사용함.

전역 변수 수정하는거임.

{searchModalStatus && <ModalLayout />}

위와 같이 전역 변수들을 useSelector들로 사용이 가능함.

[
              <FiSearch
                className="SearchIcon"
                onClick={() => {
                  dispatch(openSearchModal());
                  dispatch(switchSearchIcon(1));
                  dispatch(changeKeyword());
                }}
                key="0"
              />,
              <IoClose
                className="SearchIcon"
                onClick={() => {
                  dispatch(closeSearchModal());
                  dispatch(switchSearchIcon(0));
                  dispatch(changeKeyword());
                }}
                key="1"
              />,
              <div key="3" />,
            ][searchIconStatus]

위와 같이 배열로 쓸 수도 있음. searchIconStatus 전역 변수에 따라서 다른 렌더링

Mobx보다 훨씬 더 어렵고 쓸 데 없는 듯함

Comments

[인터뷰] 국내 게임 대기업 PD님 인터뷰 (업계 최고의 PD 양성자)

100억 이상 들어간 게임은 성공 확률이 5% 정도이다.일반적인 인디 게임을 포함해서 게임 제작의 성공 확률은 1%도 안될 것 같다게임은 정말 성공 확률이 굉장히 낮은 비즈니스이다.대신, 성공하면 크게 먹는다누구나 …

영리치 | 02.24