Redux

• Redux 는 Javascript 상태관리 라이브러리
• 리액트에 자주사용하지만 Redux는 vanilla 에서도 사용 가능하다.
• 상태관리 라이브러리로 많이 사용

사용하는 이유

• 컴포넌트 수가 많은 대형 플젝에서는 state를 전해주기위해 props를 엄청나게 써야함
• 마치 콜백지옥같은 props hell , props drilling 을 맛보게됨(이미맛봄)
  Redux는 전역으로 상태 관리를 할수 있게 되어 store라는곳에서 언제든지 꺼내 쓸 수 있음.

Redux 용어 정리

• Store
• Action
• Reducer
• dispatch

Store

• store 는 상태가 관리되는 오직 하나의 공간
• 스토어 안에는 현재 애플리케이션의 상태와 리듀서가 들어가 있음
• 한 개의 프로젝트는 단 하나의 스토어만 가질수 있음

Action

• 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생'
• Action은 컴포넌트에서 store에 운반할 데이터를 말함.
• action은 하나의 객체로 표현됨

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

Dispatch

• 액션(변화)를 발생시키는 것
• dispatch(action) 과 같은 형태로 액션 객체를 파라미터로 넣어서 호출..

Reducer

• 리듀서는 액션 type 에 따라 변화를 일으키는 함수
• 첫번 째 매개변수는 초기 상태 값이고
• 두번 째 매개변수는 Action 값임.

const initialState = {
  counter:1
}

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

정리

• Store 에는 Reducer 와 상태 값이 있음
• Reducer는 액션.type에 따라 변화를 일으키는 함수임.
• Action은 어떠한 상태가 변화가 필요할때 발생하는 이벤트. 컴포넌트에서 사용자에게 상호작용을 받아
  액션이 만들어져서 스토어로 전달 함.
• Dispatch : 컴포넌트에서 액션을 만들기 위해 사용하는 것.

예 ) 아이디/비밀번호를 사용자가 로그인 하여 버튼을 클릭 했을때
0. action을 만든다. login함수를 만들어 , 아이디 비밀번호 값을 받고 액션타입을 지정해준다.
function login(username, password) { return { type: 'LOGIN', payload: { username: username, password: password } }; }

1.버튼의 onClick 함수에 아이디/비밀번호 값을 action 으로 감싸 dispatch로 action을 보낸다
const action = login(username, password); dispatch(action);
2. dispatch로 보낸 action은 reducer가 받는다. 이때 reducer는 초기값의 state와 action 이 파라미터다. reducer 에서는 action.type 에 맞춰 적절하게 코드가 실행된다.

3. 이때. reducer에서는 불변성을위해 첫번째 파라미터 state를 항상 spread로 복사해준다 .

맞나.... 틀린점 피드백 감사하겠습니다.