Redux

React Context 가 있는데 Redex가 필요한 이유

• 우선 둘 중 하나를 선택하는 것이 아닌 둘 다 함께 사용할 수 있다.

React Context만 사용했을 때의 잠재적 단점

• Complex Setup / Management

: 큰 프로젝트를 하는 경우 너무 많은 Context Provider를 갖게 된다.( 복잡도 상승 )

return (
  <AuthContextProvider>
    <ThemeContextProvider>
      <UIInteractionContextProvider>
        <MultiStepFromContextProvider>
          <UserRegistration />
        </MultiStepFromContextProvider>
      </UIInteractionContextProvider>
    </ThemeContextProvider>
  </AuthContextProvider>
)

• Perfomance

: state 변동횟수가 많은 경우 사용하기 어렵다.

Redux 의 구조

• 프로젝트 하나에 프로젝트 전체를 위한 하나의 store(중앙 데이터 저장소) 만 존재한다.

• 중앙 저장소는 특정 컴포넌트( 설정 되어있는 )를 Subscription 하고 중앙 데이터 저장소의 state가 변경되는 subscription 있는 component에 알린다.

• store에 데이터를 직접 조작하지 않는다.

• component는 reducer 에 action을 전달한다. reducer는 전달 받은 action을 확인하여 해당하는 action으로 중앙 저장소의 데이터를 변경한다.

Reducer Function

• 순수 함수 여야 한다. 같은 밸류가 들어가면 같은값을 리턴하는 함수

const redux = require('redux');

// state에 초기값 설정
const couterReducer = (state = {counter:0}, action)=>{
  return {
    counter: state.counter +1
  };
};

const store = redux.createStore(counterReducer);

const couterSubscriber =() =>{
  // 스토에 안에 최신 업데이트된 data를 가져올수 있는 함수 
  const latestState = store.getState();
  console.log(latestState);
}

// data를 가져간 함수를 구독하여 data가 최신화 되면 업데이트 해줌.
store.subscribe(counterSubscriber);