[React] Redux 사용하기

이번에는 redux 와 redux-toolkit 을 사용하는 방법을 알아보겠습니다.

 

1. 리덕스 및 리덕스 툴킷 설치

npm install @reduxjs/toolkit react-redux

 

2. 리덕스 경로 설정

• /store 폴더 생성
• /store 내 /slices 폴더 생성

3. 리듀서 생성

• slices 폴더 내 propertyTypeSlice 생성

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

const initialState = '';

export const propertyTypeSlice = createSlice({
  name: 'propertyType',
  initialState,
  reducers: {
    setPropertyType(state, action) {
      return action.payload;
    },
  },
});

export const { setPropertyType } = propertyTypeSlice.actions;
export default propertyTypeSlice;

 

 

4. 스토어 생성

• store 폴더 내 config.js 파일 생성 

import propertyTypeSlice from './slices/propertyTypeSlice';
import { combineReducers, configureStore } from '@reduxjs/toolkit';

const rootReducer = combineReducers({
  propertyType: propertyTypeSlice.reducer, // 여기에 여러 리듀서를 넣음
});

export const createStore = () =>
  configureStore({
    reducer: rootReducer,
  });

export const store = createStore();

 

 

5. index.js에 스토어 import

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { server } from './_tosslib/server/browser';
import { BrowserRouter as Router } from 'react-router-dom';
import { store } from './store/config';
import { Provider } from 'react-redux';


ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);