[TIL] Redux

👉 Redux

A predictable state container for Javascript apps

상태관리 라이브러리. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다.
🔨 리덕스의 미들웨어라는 기능을 통하여 비동기 작업, 로깅 등의 확장적인 작업들을 더욱 쉽게 할 수 도 있게 해준다.
1. 액션(Action)
: 상태에 어떠한 변화가 필요하게 될 때, 액션이란 것을 발생시킨다. 이는, 하나의 객체로 표현. 액션 객체의 형식

{
  type: "TOGGLE_VALUE"
}

액션 객체는 type 필드를 필수적으로 가지고 있어야하고, 그 외의 값들은 마음대로 넣을 수 있다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

2. 액션 생성함수(Action Creator)
   : 액션 생성함수는, 액션을 만드는 함수. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어 준다.

   function addTodo(data) {
     return {
       type: "ADD_TODO",
       data
     };
   }
   // 화살표 함수로도 만들 수 있습니다.
   const changeInput = text => ({ 
     type: "CHANGE_INPUT",
     text
   });

3. 스토어(Store)
   : 리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 된다. 스토어 안에는, 현재의 앱 상태, 리듀서가 들어가 있고, 추가적으로 몇가지 내장 함수들이 있다.
4. 디스패치(Dispatch)
   : 스토어의 내장함수 중 하나. 디스패치는, 액션을 발생 시키는 것이라고 이해. dispatch라는 함수에는 액션을 파라미터로 전달
5. 구독(subscribe)
   : subscribe함수는, 함수 형태의 값을 파라미터로 받아온다. subscribe 함수에 특정함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출

참고 Blog
< https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt >
< https://kbennycc.blogspot.com/2019/02/0113-react-redux.html >
< https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B8%EA%B1%B8%EC%9A%94-react-redux-%ED%94%8C%EB%A1%9C%EC%9A%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-1585e911a0a6 >