react-redux 사용하기

기록용글.. 항상 어떤 기술을 사용할 때 최소한의 조건만을 사용해서 구현하는 것을 먼서 해본다(CRUD). 이는 store.js 하나만을 추가해서 만들었다.

• store,reducers 로 state를 저장하고,handling한다.
• 로 하위 모든컴포넌트에 props로전달한다.
• useSelector,useDispatch 를사용해 전달받은 state를 읽고,action을 전달해준다.

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

store.js

import { createStore } from "redux";

const initialState = {
  count: 0,
};

export const increment = {
  type: "INCREMENT",
};

export const decrement = {
  type: "DECREMENT",
};

const reducers = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        ...state,
        count: state.count + 1,
      };
    case "DECREMENT":
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

const store = createStore(reducers);
export default store;

App.js

import React from "react";
import "./App.css";
import { useSelector, useDispatch } from "react-redux";
import store, { increment, decrement } from "./store";

function App(props) {
  const state = useSelector((state) => state);

  return (
    <div className="App">
      <h1>Kong</h1>
      <h1>{state.count}</h1>
      <button
        onClick={() => {
          store.dispatch(increment);
        }}
      >
        up
      </button>

      <button
        onClick={() => {
          store.dispatch(decrement);
        }}
      >
        down
      </button>
    </div>
  );
}

export default App;