[React] Redux 실전사용

✍ 예제

App.js

import "./styles.css";
import { React, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { increase, decrease, setDiff } from "./module/counterReducer";

export default function App() {

  const dispatch = useDispatch();
  //액션을 실행 할 수 있게 해주는 시동기
  
  const number = useSelector((state) => state.number);
  //redux로 변환한 initialState를 가져오는 플러그인
  
  const [addWay, setAddWay] = useState(false);
  const [upDown, setUpDown] = useState(false);
  const [text, setText] = useState("");
  
  // 액션 생섬함수 가져온 부분 start //
  const onIncrease = () => dispatch(increase());
  const onDecrease = () => dispatch(decrease());
  const onChangeF = (e) => {
    if (e.target.value !== "") {
      setText(parseInt(e.target.value));
    }
  };
  const decreaseF = () => {
    if (number <= 0) {
      return false;
    } else {
      onDecrease();
    }
  };
  
// 액션 생섬함수 가져온 부분 end //

// Element

  return (
    <div className="App">
      <h1>{number}</h1>
      <div className="button-wrap">
        {upDown === true ? (
          <>
            <button onClick={onIncrease}>숫자를 입력해서 올리기</button>
            <button onClick={decreaseF}>버튼 눌러서 하나씩 내리기</button>
            <button
              className="return-Behind"
              onClick={() => setUpDown(!upDown)}
            >
              되돌아가기
            </button>
          </>
        ) : (
          <>
            {addWay === false ? (
              <>
                <button onClick={() => setAddWay(!addWay)}>
                  숫자를 입력해서 올리기
                </button>
                <button onClick={() => setUpDown(!upDown)}>
                  버튼 눌러서 하나씩 컨트롤
                </button>
              </>
            ) : (
              <button onClick={() => setAddWay(!addWay)}>되돌아가기</button>
            )}
          </>
        )}
      </div>
      {addWay === true ? (
        <div className="wrap">
          <input type="number" onChange={onChangeF} />
          <button
            type="buttton"
            onClick={() => {
              dispatch(setDiff(text));
            }}
          >
            submit
          </button>
        </div>
      ) : null}
    </div>
  );
}

// 사용 css

<style>
.App {
  font-family: sans-serif;
  text-align: center;
}

button {
  margin-left: 10px;
}

.wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}

input {
  width: 300px;
}

.button-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.return-Behind {
  width: 55%;
  margin-top: 20px;
}
</style>