(Redux) 리덕스에서 사용되는 키워드

액션(Action)

상태 변화가 필요할 때 액션이 작동한다. 액션은 하나의 객체로 표현되며 type 필드를 필수로 가진다. 나머지 값들은 개발자가 자유롭게 넣을 수 있다.

 

액션 생성함수(Action Creator)

액션을 만드는 함수이다. 받은 파라미터를 가지고 액션 객체 형태로 만들어 주면 된다.

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

보통 함수 앞에 export 키워드를 사용하여 다른 파일에서 불러와서 사용한다. 다만 액션 생성함수의 사용은 필수가 아니다. 액션을 발생시킬 때마다 직접 액션 객체를 생성할 수 도 있다.

 

리듀서(Reducer)

리듀서는 state, action 두 가지 파라미터를 받는다. 

function reducer(state, action) {
  return alteredState;
}

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

리덕스의 리듀서는 default : 부분에 기존 state를 그대로 반환하도록 작성한다.

여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서(root reducer)를 만들 수 있다. 루트 리듀서 안의 작은 리듀서들은 '서브 리듀서'라고 부른다.

import { combineReducers } from 'redux';
import itemReducer from './itemReducer';
import notificationReducer from './notificationReducer';

const rootReducer = combineReducers({
  itemReducer,
  notificationReducer
});

export default rootReducer;

 

스토어(Store)

애플리케이션 하나 당 한개의 스토어를 만든다. 스토어 안에는 현재의 앱 상태와 리듀서, 그리고 추가적인 내장 함수가 몇가지 있다.

 

디스패치(dispatch)

스토어 내장함수. 액션을 발생시키는 것이다. dispatch 함수로 액션을 파라미터로 전달. dispatch(action).

호출하면 스토어는 리듀서 함수를 실행시키여 해당 액션을 처리하는 로직을 처리하고 새로운 상태를 만든다.

 

구독(subscribe)

함수 형태의 값을 파라미터로 받아온다. subscribe 함수에 특정 함수를 전달하면 액션 디스패치시 전달해준 함수가 호출된다. 리액트에서 직접 사용할 일은 별로 없다. 대신 react-redux 라이브러리에서 제공하는 connect 함수 혹은 useSelector 를 사용하여 리덕스의 스토어 상태를 구독한다.

 

 

참고 자료 : https://react.vlpt.us/redux/01-keywords.html