installation

yarn add redux
yarn add react-redux

또는

npm install redux
npm install react-redux

여러분의 앱의 상태 전부는 하나의 저장소(store)안에 있는 객체 트리에 저장됩니다.
상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐입니다.
액션이 상태 트리를 어떻게 변경할지 명시하기 위해 여러분은 리듀서(reducers)를 작성해야 합니다. [출처] Redux 공식문서

configuration

state를 바로 변경하는 대신, action이라 불리는 평범한 객체를 통해 일어날 변경을 명시한다. 그리고 각각의 action이 전체 애플리케이션의 state를 어떻게 변경할지 결정하는 특별한 함수인 reducer를 작성한다.

보통의 Redux 앱에는 하나의 rootReducer 함수를 가진 단 하나의 store가 있다. 앱이 커짐에 따라 rootReducer를 상태 트리의 서로 다른 부분에서 개별적으로 동작하는 작은 reducer들로 나눌 수 있다. (아래 코드 참고)

// src/configStore.js
import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter, // 리듀서 추가 가능
});
const store = createStore(rootReducer);

export default store;

• createStore(reducer) : 앱의 상태 트리 전체를 보관하는 Redux 저장소를 만든다. 앱 내에는 단 하나의 저장소만 있어야 한다. 인수로는 reducer를 받는다. redux를 사용할 때 creatorStore를 호출할 일은 한번 밖에 없다.

• reducer (just 함수) : 주어진 현재 state 트리와 액션에서 다음 state 트리를 반환하는 함수. (주로 switch문을 활용하여 구현) state를 수정하는 함수로, reducer가 반환하는 값은 변경된 state 이다.

• Store : 앱의 전체 상태를 가지고 있는 객체이다. 이 객체의 상태를 바꾸는 유일한 방법은 dispatch를 통해 action을 보내는것 뿐이다.

• combineReducers : 앱이 점점 복잡해지면 reducer를 state의 독립된 부분들을 관리하는 함수들(reducer)로 분리하고 싶어질 것이다. combineReducers 는 서로 다른 reducer들을 값으로 가지는 객체를 받아서 createStore에 넘길 수 있는 하나의 reducer로 바꿔준다. 생성된 리듀서는 내부의 모든 reducer들을 호출하고 결과를 모아서 하나의 state 객체로 바꿔준다.

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux' // 추가

import App from './App'
import store from "./redux/config/configStore"; // 추가

ReactDOM.render(
  // Render a `<Provider>` around the entire `<App>`,
  // and pass the Redux store to as a prop
    <Provider store={store}>
      <App />
    </Provider>
  document.getElementById('root')
)

<App>을 <Provider> 로 감싸주고, configStore에서 export default 한 store를 prop으로 넣어준다.
이 작업을 한 번만 수행하면 필요한 경우 애플리케이션의 모든 컴포넌트가 Redux store에 액세스할 수 있다.

TIL을 작성하면서 머릿속에 혼재하던 개념들이 정리가 된다.
뒤에 useSelector, useDispatch 와 같은 개념들을 글로 정리하면서 더 단단하게 다져야 겠다.