Redux로 간단한 덧셈, 뺄셈 기능 만들기

1. 설치

creat-react-app 으로 시작하기

npm create-react-app my-redux-project typescript
npm install redux --save

 

2. 간단한 덧셈, 뺄셈 기능 만들기

- index.tsx

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import { createStore } from 'redux';

import counter from './reducers';

const root = ReactDOM.createRoot(

  document.getElementById('root') as HTMLElement

);

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);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

createStore로 store 생성 및 subscribe 

props로 내려주기

 

 

- App.tsx

import './App.css';

type Props = {

  value: number;

  onIncrement: () => void;

  onDecrement: () => void;

}

function App({ value, onDecrement, onIncrement}: Props) {

  return (

    <div className="App">

      Clicked: {value} times

      <button onClick={onIncrement}>+</button>

      <button onClick={onDecrement}>-</button>

    </div>

  );

}

export default App;

 

props 받아오기

 

- reducers/counter.tsx

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;

 

reducer 작성 (여기에선 간단한 덧셈 뺄셈)