[Redux] 시작하기!

react 컴포넌트 간 자원을 쉽게 공유할 방법을 찾다가 redux를 사용하게 됐다!

redux는 store라는 상태들을 저장하고 있는 곳이 있다.
store에는 모든 변수 타입이 될 수 있는 여러 state들이 존재하고 이 state는 reducer를 통해서만 값이 변경될 수 있다.

import { createStore } from 'redux'

const store = createStore(reducer); 

// store에는 reducer를 반드시 주입해줘야한다.

reducer는 불려질 때 { state, action } 총 두 개의 값을 받는다.

• state는 current state로 현재 state값을 말하고, action은 그 현재 state값을 어떻게 바꿀 것인지에 대한 행위를 말한다.
• return으로 바뀐 새로운 state값을 반환한다.
• reducer는 단순히 사용자가 보낸 값으로 state를 변경하는 것과는 다르게 작동한다.
  redux는 각각의 state를 불변하게 유지해야하기때문에 (redux의 불변성) 반환할 새로운 state를 만들때 과거의 state를 복제하여 만들게 된다. 그래서 반드시 state값은 초기화되어있어야하고, 되지 않은 경우를 방지하기 위하여 state가 undefined인 경우 초기값을 넣어줄 수 있게 로직을 짜야한다.

redux

import { Provider, useSelector, useDispatch } from react-redux;

• provider
  : state를 어떤 컴포넌트에 적용하여 제공할 것인지를 정의해준다.
  사용할 컴포넌트를 <provider>로 감싸준다. 감싸져있는 컴포넌트들만 정의해준 store를 사용할 수 있다.

  <Provider>
  	<App />
  </Provider>

• useSelector()
  : 함수를 인자로 받아 state값을 참조하여 사용할 수 있다.

  const num = useSelector((state) => state.num);

• useDispatch
  : state에 어떤 action을 취할 것인지를 정해준다.

  const dispatch = useDispatch();