Counter UI 생성

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

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

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

Store 생성 및 Action 전달

store는 createStore라는 함수를 가져와서 만들 수 있다. store는 앱의 전체 상태 트리를 보유하는 redux 저장소로, 앱에는 하나의 스토어만 있어야 한다.

getState() 메소드를 통해 현재의 state를 가져올 수 있고, dispatch() 메소드를 이용해서 action을 넣어서 store에 있는 state를 업데이트 할 수 있다.

subscribe() 메소드를 통해 변경된 state를 반영할 수 있다. 작업이 전달 될 때마다 이 메소드가 호출되어 트리의 일부가 잠재적으로 변경되었음을 감지할 수 있고, 그 다음 getState()를 호출하여 현재 state를 읽을 수 있다.

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// 작성한 리듀서를 넣는다
const store = createStore(counter)

// getState()를 통해 현재 state를 가져올 수 있다.

// 그리고 disptach()를 이용해 action을 넣어서 disptach 하여 상태를 업데이트 할 수 있다.
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)