액션

상태에 어떤 변화가 필요하면 액션이 발생한다. 이는 하나의 객체로 표현되며, 액션 객체는 다음과 같은 형식으로 이뤄져있다.

type: 'TOGGLE_VALUE'

액션 객체는 type 필드를 반드시 갖고 있어야 하며 이 값이 액션의 이름이라 생각하면 된다. 나머지 값들은 나중에 상태 업데이트를 할 때 참고할 값이며, 작성자 마음대로 넣을 수 있다.

{
  type: 'ADD_TODO',
  data: {
    id:1,
    text: 'learning Redux'
  }
}

{
  type: 'CHANGE_INPUT',
  text: '안녕하세요'
}

리듀서

reducer는 변화를 일으키는 함수. 액션을 만들어 발생시키면 리듀서가 현재 상태와 전달 받은 액션 객체를 파라미터로 받아오고, 두 값을 참고해 새로운 상태를 반환해준다.

const initialState = {
  counter: 1,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return {
        counter: state.counter + 1,
      };
    default:
      return state;
  }
}

스토어

프로젝트에 리덕스를 적용하기 위해 리덕스를 만들어야. 한 개의 프로젝트는 하나의 스토어만 가질 수 있으며, 스토어 안에는 현재 application 상태와 reducer, 몇 개의 중요한 내장함수가 들어가있음.

디스패치

스토어의 내장함수 중 하나. 액션을 발생시키는 것. 이 함수가 호출되면 스토어는 리듀서 함수를 실해이켜 새로운 상태를 만듦.

Provider

react-redux 라이브러리에 내장된, 리액트 앱에 store를 쉽게 연동할 수 있도록 도와주는 컴포넌트 이 컴포넌트를 불러온 다음, 연동할 컴포넌트를 감싸주고 props로 store값을 설정해줄 것

const store = createStore(reducers);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
);

redux-thunk

리덕스에서 비동기 작업을 처리할 때 가장 많이 사용되는 미들웨어. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치할 수 있음.

```

출처: 『리액트를 다루는 기술』, 길벗출판사 출처: 『벨로퍼트와 함께하는 모던 리액트』