[ZICZONE 프로젝트] Redux를 사용한 알림 저장: Redux란?

직존만들때 Redux 사용해서 실시간 알림을 저장했었는데 가물가물해서 다시 정리하면서 정확히(?)기억하려고 한다.ㅋㅋ

 

Redux란?

Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 라이브러리

여러 컴포넌트 간에 상태를 공유해야 할 때 애플리케이션의 모든 상태를 하나의 저장소에서 관리해준다!

 

Redux의 특징은 단방향 데이터 흐름이다. 

(Action -> Reducer -> Store저장 -> View: UI에 보이게 됨)

 

이런 단방향 흐름 덕분에 상태 관리가 투명하고, 예측 가능한 방식으로 이루어질 수 있다.

이로 인해 대규모 애플리케이션에서도 상태 관리를 일관되게 유지할 수 있게 된다!

(이건 몰랐잔아)

 

1. Action: 상태 변경을 요청하는 ‘명령’이다. 보통 type 속성(액션 타입)과 payload(전달할 데이터)로 구성

export const setAlarms = (alarms) => ({
  type: 'SET_ALARMS',
  payload: alarms
});

export const addAlarm = (alarm) => ({
  type: 'ADD_ALARM',
  payload: alarm
});

 

2. Reducer: Action을 받아 새로운 상태를 반환하는 순수 함수이다. 이전 상태와 액션을 받아서 새로운 상태를 반환하는데, 상태를 직접 변경하지 않고, 새로운 상태 객체를 반환하는 방식으로 변경이 이루어진다.

const alarmReducer = (state = initialState, action) => {
    switch (action.type) {
      case 'SET_ALARMS': // 초기에 지금까지 받은 알림들 세팅
        return {
          ...state,
          alarms: action.payload
        };
      case 'ADD_ALARM':
        return {
          ...state, // 기존 상태를 유지하면서
          alarms: [action.payload, ...state.alarms], // 새로운 알림을 맨 앞에 추가
          unread: true
        };
        ···

 

 

3. Store: 상태를 저장하는 중앙 저장소이다. 모든 상태는 이 Store에서 관리되고, 리듀서를 통해 상태가 변경된다.

 

나는 Redux Toolkit과 redux-persist를 사용한 방식을 사용해서 이 부분은 따로 글 작성할거임 💦💦

 

 

4. Dispatch: 액션을 발생시키는 함수로, Reducer가 상태를 변경할 수 있도록 액션을 전달한다.

 

나는 alarm이름으로 서버로부터 실시간으로 알람을 받으면 즉시 addAlarm액션을 실행했음.

export const subscribeToSSE = (userId, token) => (dispatch) => {
  const eventSource = new EventSource(`http://000.000.000.00:12000/sse/subscribe/${userId}?token=${token}`);

  eventSource.addEventListener("alarm", function (e) {
    const alarm = JSON.parse(e.data);
    dispatch(addAlarm(alarm));
  });

  eventSource.onerror = function () {
    console.error("Error in SSE connection");
    eventSource.close();
  };
};