리액트 리덕스 셋팅(툴킷x)정리

이번에 redux-toolkit이 나오면서 이전에 셋팅하던 리덕스를 정리하고자 글을남김.

step 1. 리덕스 설치

npm add redux react-redux

step 2. 리듀서 생성후 리듀서 리턴

mkdir ./reducer/user.js
mkdir ./reducer/post.js

user.js(post.js동일)

const initialState: UserState = {  // 초기 데이터
  isLoggingIn: false,
  data: null,
};

const userReducer = (prevState = initialState, action) => { // 리듀서 생성
    switch (action.type) {
   
    }
});

export default userReducer;

step 3. 루트 리듀서 셋팅

스토어에 리듀서를 등록하는데 리듀서는 한 개만 등록할 수 있음. 루트 리듀서에 등록한 리듀서를 한 개의 객체로 감싸서 스토어에 등록.

mkdir ./reducer/index.js  // 폴더와 기본파일 생성

import { combineReducers } from 'redux';
import userReducer from './user';  // user 리듀서
import postReducer from './post';  // post 리듀서

const reducer = combineReducers({  // 리듀서 통합
  user: userReducer,
  posts: postReducer,
});

export default reducer;

step 4. 액션파일, 리듀서 스토어 등록

액션 및 액션생성함수 파일별도 생성, 스토어 등록

1. 액션정의
mkdir ./actions/user.js


export const LOG_IN_REQUEST = 'LOG_IN_REQUEST';  // 각 액션
export const LOG_IN_SUCCESS = 'LOG_IN_SUCCESS';
export const LOG_IN_FAILURE = 'LOG_IN_FAILURE';

export const logInRequest = (data) => {  // 액션 생성함수
  return {
    type: LOG_IN_REQUEST,
    data,
  }
};

export const logInSuccess = (data) => {
  return {
    type: LOG_IN_SUCCESS,
    data,
  }
};

export const logInFailure = (error) => {
  return {
    type: LOG_IN_FAILURE,
    error,
  }
};

액션생성 함수는 변경될 state가 동적이거나 사용자가 입력한 값으로 액션을 취할때 필요.

2. store

import { createStore, compose, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

import reducer from './reducers';

const enhancer = process.env.NODE_ENV === 'production'
  ? compose(
    applyMiddleware(
      // 미들웨어
    ),
  )
  : composeWithDevTools( // 개발모드일때 상태추적
    applyMiddleware(
      // 미들웨어
    ),
  );

const store = createStore(reducer, initialState, enhancer);  // 스토어 생성

export default store;

step 5. 스토어 등록

app.js

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#root'),
);