what is Redux?

what is Redux?

Redux is a library, managing cross-component or app-wide state.

 

1. local state | 하나의 컴포넌트에서 사용되는 state
   • ex) input에 입력한 state
2. cross component state | props을 통해 여러 컴포넌트에 영향을 미치는 state
   • ex) modal 
3. app wide state | app 전체(또는 대부분)에 영향을 미치는 state
   • ex) authorization 

context vs. Redux

여러 컴포넌트에 영향을 미치는 state나, 앱 전체에서 사용될 수 있는 state를 관리할 때 react의 context api를 이용할 수 있다. 즉 redux는 context와 같은 역할을 한다. 그렇다면 왜 context 대신 redux를 사용할까? 

 

1. react context's potential disadvantage(내재/잠재하는 단점)
   • 하나의 컴포넌트에 여러 provider를 제공할 수 있기 때문에, 사용하는 context가 많아지면 코드가 복잡해 진다. 
   • context는 자주 변하지 않는(low frequency change) state를 관리하는 데에 적합하기 때문에, 그렇지 않은 경우를 context로 관리하면 low perfomance 문제를 야기한다.  
   • redux는 context의 이러한 단점을 보완하기 위해 사용할 수 있는 라이브러리이다. 
2. 어플리케이션을 만들 때, 리덕스와 context 둘 중 하나를 사용하는 것이 아니라 둘 다 사용하는 경우가 더 많다. 
   • 보통 app wide state에 대해서는 리덕스와 context 둘 중 하나를 사용한다.
   • cross component state는 두 가지를 ??? 혼용해서 사용할 수 있다. 

how Redux works? 

redux core concepts

 

1. one central state store | 리덕스는 단 하나의 data 저장소를 가지고 있으며, 여기에 어플리케이션의 모든 state를 저장할 수 있다. 
2. subscription | 어떤 컴포넌트를 subscription 상태로 셋업하면, 해당 컴포넌트는 store에 저장된 특정 data가 변경될 때 마다 그것을 알아차릴 수 있다. 
   
   • 컴포넌트는 store에 저장되어있는 state를 읽을 수는 있지만, 직접 그 state를 다른 값으로 변경할 수는 없다. => action을 이용한다. 
3. actions & dispatch | 컴포넌트는 reducer 함수에 특정한 액션을 전달(dispatch)할 수 있다.   
   • 이 때 action은 js 객체이며, reducer 함수에서 수행해야할 작업을 설명하고 있다.
4. reducer | reducer 함수는 전달받은 action을 이용해서 store에 저장되어 있는 data를 변형할 수 있다(state를 업데이트 할 수 있다).
   • 이 때 reducer function은 프로그래밍의 일반적인 개념이며, useReducer 훅 자체를 가리키는 것이 아니다. 
     •  reducer function take some inputs then, transform and reduce them into a new output. 
   • reducer는 일반적인 js 함수이지만, redux 에 의해 호출된다.
     • (oldState, action) => { return {new state} }
     • 이전의 state와 전달받은 action을 input으로 받아서 새로운 state(보통 객체)를 반환해야 한다.
     • reducer 함수 내부에서는 side effect를 수행하지 않아야 한다.
     • 같은 input을 전달받았을 때에는 같은 output을 반환해야 한다.
5. 리액트에 국한되지 않고, 어느 js 프로젝트에서나 redux를 사용할 수 있다. 

 

// node js
const redux = require('redux');

const counterReducer = (state = { counter: 0 }, action) => {
  if(action.type === 'increment') {
    return {
      counter: state.counter + 1, // init value : 1
    };
  }
  return state; 
};

const store = redux.legacy_createStore(counterReducer);

const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState); 
};

store.subscribe(counterSubscriber);

store.dispatch({ type: 'increment' }); // 2

 

1. store.dispatch(action) | action을 전달하고 reducer를 실행한다. 
2. createStore(reducer) 
   • store를 만든다. 이 때 store의 data를 변형할 수 있는 reducer fn을 인자로 전달한다. 
   • reducer는 state와 action을 인풋으로 받아서, 새로운 state를 반환한다.
3. store.subscribe | store에 저장된 state가 변경될 때 마다 실행할 subscriber를 등록한다.
4. 정리
   • dispatch를 이용해서 action을 전달하고, reducer를 실행한다.
   • reducer는 state를 변형한다.
   • state가 변경되면 등록된 subscriber를 실행한다.
   • reducer 함수 내부에서는 action에 따라 다른 일을 수행한다.