생활코딩: react-redux 예제2

1.App.js 작성

import React from "react";
import {createStore} from 'redux';
import {Provider, useDispatch, useSelector} from 'react-redux'


//1. redux를 사용하기 위한 reducer 함수
function reducer(state, action){
  if(action.type === 'up') {
    return {...state, value:state.value + action.step}
  }
  return state; //상태 반환
}

const initialState = { value : 0 }

//2. store 생성
const store = createStore(reducer, initialState);

function Counter() {

  //4. reducer 함수에 action을 전달할 수 있도록 useDispatch 사용
  const dispatch = useDispatch();

  //6. 기존 또는 "변경"된 state를 표시할 수 있도록 useSelector 사용. store에 저장된 state 값을 사용한다.
  const count = useSelector(state => state.value);

  
  return (
    <div>
      <button onClick={()=>{
        // 5.useDispatch함수 사용. action.type, action.step을 담은 객체를 dispatch에 넣어준다. 이게 reducer 함수의 action에 전달된다.
        dispatch({type:'up', step:2}); 
      }}>+</button> {count}
    </div>
  );
}

function App() {
  return (
    //3. store를 하위 컴포넌트가 사용할 수 있도록 <Provider store={}> 컴포넌트 적용
    <Provider store={store}>
      <div>
        <Counter></Counter>
      </div>
    </Provider>
  );
}

export default App;