[redux]리덕스 초기 세팅 및 폴더구조 생성

electron.js와 react를 통합하여 메신저앱을 만드는 중,

react내에서 수시로 불러야 할 api들은 redux로 관리하기로 하여 초기 세팅 작업에 들어갔습니다.

아래는 제가 적용했던 redux 초기 세팅방법에 대한 내용입니다.

 

 

 

 

리덕스 초기 세팅 및 폴더구조 생성

 

 

1. 리덕스 설치

아래 내용으로 redux를 설치합니다.

npm install redux react-redux redux-thunk

 

• redux: Redux 라이브러리 본체입니다.
• react-redux: React와 Redux를 연결해주는 라이브러리입니다.
• redux-thunk: 비동기 로직을 처리하기 위한 미들웨어입니다.

 

 

 

2. redux 폴더구조 

 

폴더구조는 아래처럼 만들기로 하였습니다.

 

src/
└── redux/
    ├── actions/
    │   ├── agentActions.js
    │   ├── chatActions.js
    │   └── ... (기타 액션 파일들)
    ├── reducers/
    │   ├── agentReducer.js
    │   ├── chatReducer.js
    │   ├── rootReducer.js (모든 리듀서를 결합)
    │   └── ... (기타 리듀서 파일들)
    ├── store/
    │   └── index.js (스토어를 생성하고 필요한 미들웨어를 적용)
    └── types/
        └── actionTypes.js (모든 액션 타입을 정의)

 

 

 

 

 

3. 액션 정의

상담사 정보를 요청, 성공, 실패에 대한 액션 타입을 정의합니다.

 

// actions/agentActions.js
export const FETCH_AGENTS_REQUEST = 'FETCH_AGENTS_REQUEST';
export const FETCH_AGENTS_SUCCESS = 'FETCH_AGENTS_SUCCESS';
export const FETCH_AGENTS_FAILURE = 'FETCH_AGENTS_FAILURE';

 

 

 

 

4. 액션 생성자 작성

액션 생성자 함수를 작성합니다.

 

// actions/agentActions.js
import { FETCH_AGENTS_REQUEST, FETCH_AGENTS_SUCCESS, FETCH_AGENTS_FAILURE } from './agentActions';

export const fetchAgentsRequest = () => ({
  type: FETCH_AGENTS_REQUEST,
});

export const fetchAgentsSuccess = agents => ({
  type: FETCH_AGENTS_SUCCESS,
  payload: agents,
});

export const fetchAgentsFailure = error => ({
  type: FETCH_AGENTS_FAILURE,
  payload: error,
});

 

 

 

 

5. 리듀서 작성

액션에 따라 상태를 변경하는 리듀서를 작성합니다.

 

// reducers/agentReducer.js
import { FETCH_AGENTS_REQUEST, FETCH_AGENTS_SUCCESS, FETCH_AGENTS_FAILURE } from '../actions/agentActions';

const initialState = {
  loading: false,
  agents: [],
  error: '',
};

const agentReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_AGENTS_REQUEST:
      return {
        ...state,
        loading: true,
      };
    case FETCH_AGENTS_SUCCESS:
      return {
        loading: false,
        agents: action.payload,
        error: '',
      };
    case FETCH_AGENTS_FAILURE:
      return {
        loading: false,
        agents: [],
        error: action.payload,
      };
    default:
      return state;
  }
};

export default agentReducer;

 

 

 

 

 

6. 스토어 생성

Redux 스토어를 생성하고 리듀서를 연결합니다.

 

// store.js
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import agentReducer from './reducers/agentReducer';

const rootReducer = combineReducers({
  agent: agentReducer,
});

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

 

 

 

리덕스 초기 세팅에 앞서 액션, 리듀서, 스토어의 역할에 대해 잘 알고 있어야 할 것 같습니다.

감사합니다.