☀️들어가며

redux를 이용해서 미들웨어 없이 counter 앱을 만드는 실습을 해보겠다.

⭐redux 라이브러리 설치

npm install redux --save

⭐Reducer 생성

src/reducers/index.tsx에 reducer를 생성한다.

const counter = (state = 0, action: { type: string }) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        default:
            return state;
    }
}
export default counter;

counter는 reducer함수로 첫번째 인자로 이전 상태의 state를 받으며 state가 없을 경우 기본값을 0으로 초기화한다. 두번째 인자로는 action 객체를 받고 action 객체의 type property의 값에 따라서 state를 다르게 반환한다.

⭐index.tsx

import counter from './reducers';

const store = createStore(counter);

const render = () => root.render(
  <React.StrictMode>
    <App
      value={store.getState()}
      onIncrement={() => store.dispatch({type:'INCREMENT'})}
      onDecrement={() => store.dispatch({type:"DECREMENT"})}
    />
  </React.StrictMode>
);
render();
store.subscribe(render); 

먼저 앞서 만들어놓은 counter reducer를 이용해 store를 생성한다. createStore()를 이용해 store를 만든 이후에 App 컴포넌트에 getState()를 이용해 현재 상태를 내려주고 또 증가와 감소시에 사용할 함수들을 props로 내려주었다.

값을 증가할 때 발생시킬 이벤트 핸들러로 onIncrement 함수를 props로 내려주었는데 이 함수는 store의 dispatch함수를 실행하는 함수이다.

그런 다음 render 함수가 store를 구독하도록 subscribe를 통해 render함수를 등록해준다. 그러면 store에 상태변화가 일어날 때마다 render함수는 실행된다.

🪐dispatch()

dispatch 함수는 Redux 스토어(store)에서 액션을 디스패치(dispatch)하여 상태 변화를 발생시키는 역할을 합니다. store.dispatch(action) 형식으로 사용됩니다.
dispatch 함수는 액션 객체를 인자로 받아서 해당 액션을 스토어에 전달합니다. 액션은 반드시 type 속성을 가져야 하며, 필요에 따라 추가적인 데이터를 payload 속성 등으로 포함할 수 있습니다.
-chatGPT

⭐App.tsx

type Props = {
  value: number;
  onIncrement: () => void;
  onDecrement: () => void;
}

function App({ value, onIncrement, onDecrement }: Props) {
  return (
    <div className="App">
      Clicked: {value} times
      <br />
      <button onClick={onIncrement}>
        +
      </button>
      <button onClick={onDecrement}>
        -
      </button>
    </div>
  );
}

export default App;

App 컴포넌트는 간단한 UI로 구성되어 있으며 type Props는 App 컴포넌트에서 props를 받을 때 type을 지정해주기 위해서 선언되었다.

🌌마무리하며

redux를 앱에서 사용하는 방법은 다음과 같이 정리할 수 있다.

1. reducer 함수를 생성한다.
2. createStore()의 인자에 reducer함수를 주며 store 객체를 만든다.
3. 특정 event가 발생하면 해당 event handler에서 store.dispatch()를 통해서 상태 변화를 일으킨다.
4. 상태 변화가 발생하면 re-render가 필요한 함수를 store.subscribe()를 통해 등록한다.