Redux

자바스크립트 상태관리 라이브러리
Props의 불편함을 개선하기 위해 만들어진 개념
(React 외 다른 언어에서도 사용 가능)

🛠 설치 & 환경설정

Redux 설치 : npm install redux
Redux
React Redux 설치 : npm install react-redux
React Redux

1. 초기 설정(Provider, store, reducer)

· Provider 컴포넌트를 가져와 Store를 통해 상태를 관리해줄 컴포넌트를 감싸줌

index.js

import { Provider } from "react-redux";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

· redux라이브러리에서 createStore 매소드를 통해 Store 객체 생성

store.js

import { createStore } from "redux";
import reducer from "./reducer";

let store = createStore(reducer);

export default store;

reducer.js

· reducer는 두개의 인자값을 가짐(초기값, 실행값)

let initialState = {};
function reducer(state = initialState, action) {
}

export default reducer;

2. useDispatch()로 action에 객체를 전달

App.js

import { useDispatch} from "react-redux";

function App() {
  const dispatch = useDispatch();
  
 const increase = () => {
    dispatch({ type: "INCREMENT" });
  };
 const decrease = () => {
    dispatch({ type: "DECREMENT" });
  };
 return (
   <div className="App">
     <h1>0</h1>
     <button onClick={decrease}>감소</button>
     <button onClick={increase}>증가</button>
   </div>
  );
}

export default App;

해당 버튼을 눌러 함수가 실행되면 함수 내부의 dispatch함수가 action객체의 type을 reducer 함수로 전달

reducer.js

let initialSate = {
  count: 0,
};
function reducer(state = initialSate, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return { ...state };
  }
}

export default reducer;

3.useSelector로 변경된 값 UI에 출력

App.js

import { useDispatch, useSelector } from "react-redux";

function App() {
  const dispatch = useDispatch();
  const count = useSelector((state) => state.count); 
 //store에 state값 불러옴
  
 const increase = () => {
    dispatch({ type: "INCREMENT" });
  };
  const decrease = () => {
    dispatch({ type: "DECREMENT" });
  };
  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={decrease}>감소</button>
      <button onClick={increase}>증가</button>
    </div>
  );
}

export default App;

---

+ Payload (선택적 요소)

5씩 감소시키기

App.js

import { useDispatch, useSelector } from "react-redux";

function App() {
  const dispatch = useDispatch();
  const count = useSelector((state) => state.count);
  //store에 state값 불러옴

  const increase = () => {
    dispatch({ type: "INCREMENT" });
  };
  const decrease = () => {
    dispatch({ type: "DECREMENT", payload: { num: 5 } });
  };
  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={decrease}>감소</button>
      <button onClick={increase}>증가</button>
    </div>
  );
}

export default App;

reducer.js

let initialSate = {
  count: 0,
};
function reducer(state = initialSate, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - action.payload.num };
    default:
      return { ...state };
  }
}

export default reducer;

payload 복수의 값

App.js

import { useDispatch, useSelector } from "react-redux";

function App() {
  const dispatch = useDispatch();
  const id = useSelector((state) => state.id);
  const pw = useSelector((state) => state.password);

  const login = () => {
    dispatch({ type: "LOGIN", payload: { id: "jang", password: 123 } });
  };
  return (
    <div className="App">
      <h1>
        {id}{pw} // jang123
      </h1>
      <button onClick={login}>로그인</button>
    </div>
  );
}

export default App;

reducer.js

let initialSate = {
  id: "",
  password: "",
};
function reducer(state = initialSate, action) {
  switch (action.type) {
    case "LOGIN":
      return {
        ...state,
        id: action.payload.id,
        password: action.payload.password,
      };
    default:
      return { ...state };
  }
}

export default reducer;