리덕스로 Counter객체만들기(+ payload)

 

//처음 App.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";
//사용할 Action Creator import를 해서 사용
import { minusOne, plusOne } from "./redux/modules/counter";

const App = () => {
  const dispatch = useDispatch();

  const number = useSelector((state) => state.counter.number);
  console.log(number);

  return (
    <div>
      {number}
      <button
        onClick={() => {
          dispatch(plusOne()); //{type: "PLUS_ONE"} 대신 이렇게 사용
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          dispatch(minusOne()); //{type: "MINUS_ONE"} 대신 이렇게 사용
        }}
      >
        -1
      </button>
    </div>
  );
};

export default App;

//액션 value들을 상수로 만들어주기 보통 이렇게 한 곳에 모여있다.
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";

//Action Creator 만들기
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

export const minusOne = () => {
  return {
    type: MINUS_ONE,
  };
};

//초기 상태값

const initialState = {
  number: 0,
};

//리듀서

const counter = (state = initialState, action) => {
  console.log(action);
  switch (action.type) {
    case PLUS_ONE: //PLUS_ONE이라는 case(action.type) 추가
      return {
        number: state.number + 1,
      };
    case MINUS_ONE:
      return {
        number: state.number - 1,
      };
    default: //다른값일때는 state를 그대로 반환
      return state;
  }
};

//모듈파일에선 리듀서를 export default 한다
export { counter };

 

Final Redux payload사용한방법

//App.js

import React from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addNumber, minusNumber } from "./redux/modules/counter";

const App = () => {
  const dispatch = useDispatch();
  const [number, setNumber] = useState(0);

  const globalNumber = useSelector((state) => state.counter.number);

  const onChangeHandler = (event) => {
    const { value } = event.target; //event.target은 string이기 때문에 +로 숫자로 형변환
    setNumber(+value);
  };

  const onClickAddNumberHandler = () => {
    dispatch(addNumber(number));
  };

  const onClickMinusNumberHandler = () => {
    dispatch(minusNumber(number));
  };

  return (
    <div>
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler} />
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button onClick={onClickMinusNumberHandler}>빼기</button>
    </div>
  );
};

export default App;

//index.js

//원래 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

//우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  //App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  //원래
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>

  //변경내용
  <Provider store={store}>
    <App />
  </Provider>
);

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

// "../redux/config/configStore.js"


import { createStore } from "redux";
import { combineReducers } from "redux";

import { counter } from "../modules/counter";

//store 만드는 코드
// const rootReducer = combineReducers({});
// const store = createStore(rootReducer);

//이 store를 module과 이어서 state를 사용할수있게 만드는 코드
const rootReducer = combineReducers({
  counter: counter, //리듀서 부분인 counter와 store를 연결
});
const store = createStore(rootReducer);

export default store;

//"../redux/modules/counter.js"

//Action Value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";

//Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload: payload,
  };
};

export const minusNumber = (payload) => {
  return {
    type: MINUS_NUMBER,
    payload: payload,
  };
};
//initial state
const initialState = {
  number: 0,
};

//Reducer 기본형태
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    case MINUS_NUMBER:
      return {
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

//export default reducer
export { counter };