Redux 란?

리덕스란 무엇인가?

리덕스는 가장 사용률이 높은 상태관리 라이브러리이다 러덕스를 사용하면 앞으로 만들게될 프로젝트의 컴포넌트들의 상태관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할수 있다 또한 컴포넌트끼리 상태를 공유하게될때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달할수있다

리덕스의 필요성

리덕스는 글로벌 상태 관리를 하게 될때 굉장히 효과적이다 물론 리덕스를 사용하는것이 유일한 방법은 아니고 Context API를 사용해서도 동일한 작업을 할수있다

 

리덕스의 키워드액션 (Action)

• 상태에 어떠한 변화가 필요하게 될때 액션을 발생시킨다 액션은 하나의 객체로 표현된다 액션은 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있다

• {
  	// 필수 요소
      type:"TOGGLE_VALUE",
      
      //개발자 마음대로 넣어도 되는값
      data: {
      	id: 0,
          text:"리덕스 배우기"
      }
      
  }

액션생선함수 (Action Create)

• 액션 생성함수는 액션을만드는 함수이다 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다

• export function addTodo(data) {
      return {
        type: "ADD_TODO",
        data
      };
  }
  
  // 화살표함수로 표현
  export const addTodo = data => ({
      type: "ADD_TODO",
      data
  })

• 이러한 액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이다. 그래서 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용한다
• 리덕스를 사용 할 때 액션 생성함수를 사용하는것이 필수적인건 아니다 액션을 발생 시킬 때마다 직접 액션 객체를 작성할수도 있다

리듀서 (Reducer)

• 리듀서는 변화를 일으키는 함수이다 리듀서는 두가지의 파라미터를 받아온다

• 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;
    }
  }

   
• 리듀서는 현재의 상태아 전달받은 액션을 참고하여 새로운 상태를 만들어서 반환한다
• useReducer 에서는 default: 에서 Error를 주었지만 리덕스에서는 State를 그대로 반환해야한다

스토어 (store)

• 리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 된다 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다

디스패치 (dispatch)

• 디스패치는 스토어의 내장함수 중 하나이다 디스패치는, 액션을 발생 시키는 것 이라고 이해하면 된다. dispatch 라는 함수에는 액션을 파라미터로 전달한다.. dispatch(action) 이런식으로 말이다
• 그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다

구독 (subscribe)

• 구독 또한 스토어의 내장함수 중 하나이다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아온다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다