[React] Redux 기본 사용법

이번시간은 Redux 기본 사용법입니다.

일단 Redux 왜쓰는지 이런거 모르시는분은 더 알아보고 오십쇼 그걸 무조건 알고 코딩을 배워야합니다.

이건 숙련자용입니다 코딩열심히하다 갑자기 기억안날때 보는것

// App.js
import { useSelector, useDispatch } from "react-redux";
export default function App() {
  const storedValue = useSelector((state) => state);
  const dispatch = useDispatch();

  const incBtn = () => {
    dispatch({ type: "inc" });
  };

  const descBtn = () => {
    dispatch({ type: "desc" });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{storedValue}</h2>
      <button onClick={incBtn}>+</button>
      <button onClick={descBtn}>-</button>
    </div>
  );
}

// index.js
import { createRoot } from "react-dom/client";
import { createStore } from "redux";
import { Provider } from "react-redux";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const value = 100;
function reducer(state = value, action) {
  if (action.type === "inc") return ++state;
  else if (action.type === "desc") return --state;
  else return state;
}

let store = createStore(reducer);

root.render(
    <Provider store={store}>
      <App />
    </Provider>
);

그리고 Context API를 하셨으면 아시겠지만 Provider로 감싼 뒤에 store라는 props안에 내가 공유할 모든 state 넣으시구요

dispatch({ type: "inc" });

이걸로 type:"어쩌구" 를 redux에 dispatch하면

function reducer(state = value, action) {
  if (action.type === "inc") return ++state;
  else if (action.type === "desc") return --state;
  else return state;
}

redux는

if (action.type === 어쩌구) {
	return state를 어쩌구 해라
}

이런식으로 if문 걸어서 내가 원하는 행동을 수행해줍니다.