React의 Redux,Reducer - 리액트 전역관리를 해보자(1)

종합 프로젝트 이후 이번에 개선할점은 최적화 였다! 팀원들과의 규칙과 전역관리를 조금더 최적화시키려고 노력을 하다보니 저번에 하고싶었지만 못했던 리덕스로 리액트 전역관리를 해보려고 공부에 들어갔다 .

 

Redux의 세가지 원칙

1. 하나의 애플리케이션 안에는 하나의 Store 만 사용해야 합니다.
2. state는 읽기 전용 입니다. state를 변화시키는 유일한 방법은 Action을 전달하는 것 뿐입니다. 이를 통해 모든 state 변화를 중앙에서 관리 할 수 있으며, state 변경에 대한 추적이 용이해 집니다.
3. state 변화를 일으키는 Reducer는 순수 함수로 작성되어야 합니다. Reducer는 현재 state와 Action을 전달 받아 다음 state를 반환하는 순수 함수 입니다. 즉, 이전 state를 변경하는 것이 아니라 새로운 state 객체를 생성하여 반환 합니다.

개념을 정리하자면 

 

액션

상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생합니다. 이는 하나의 객체로 표현, 액션 객체는 다음과 같은 형식으로 이루어져 있다.

액션 객체는 type 필드를 반드시 가지고 있어야 합니다. 이 값을 액션의 이름이라고 생각하면 된다.

그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 수 있다.

 

내가 지금 공부중에 해본 메세지 Reducer 파일입니다 .

일단 리듀서파일을 만들어 액션 타입 등록 

const ADD_MESSAGE = 'ADD_MESSAGE';

const SET_EXIT_TIME = 'SET_EXIT_TIME'; // 새로운 액션 타입 추가

const initialState = {

  messages: [],

  exitTime: null, // exitTime을 초기화

};

export const ChattingReducer = (state = initialState, action) => {

  switch (action.type) {

    case ADD_MESSAGE: // 메세지가 쌓여야하는 구조

      return { ...state, messages: [...state.messages, action.payload] };

    case SET_EXIT_TIME: //나가는 시간 action

      return { ...state, exitTime: action.payload };

    default:

      return state;

  }

};

// 액션 선언

export const addMessage = (message) => ({

  type: ADD_MESSAGE,

  payload: message,

});

export const setExitTime = (exitTime) => ({

  type: SET_EXIT_TIME,

  payload: exitTime,

});

 

이후 스토어를 만들어주어 

const store = configureStore({

  reducer: {

    // visit: TrackUserReducer,

    message : ChattingReducer // 채팅리듀서추가

  },

});

export default store;

 

채팅리듀서를 선언하여, App.js  상위에 선언해주어 전역으로 사용할수있게 관리하면됩니다 .

 

여기서 이제  디스패치라는 것을 사용할건데

디스패치

디스패치는 스토어의 내장 함수 중 하나입니다. 디스패치는 “액션을 발생시키는 것”이라고 이해하면 됩니다. 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출합니다.

이 함수가 호출되면 스토어 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줍니다.

 

이게 액션의 상태를 변경해주는 내용이다 . 
이것으로 액션의 상태를 변경해주며, 가져와 사용할수있게된다.

 

이것도 그렇고 redux-thunk나 redux-saga 라는 리덕스의 비동기 작업을 처리하는방법이 있는데 
이것은 2탄에서 설명하도록하겠다 !