React_redux tool kit : 기본 예제

Redux란?

"애플리케이션이 예측가능할 수 있도록 도와줌"

1. 애플리케이션의 복잡성을 한 단계 낮출 수 있다.
2. 개발자가 직접 state의 값을 바꿀 수 없으며, state를 가져올 때도 마찬가지다.
3. Time traveling 가능
4. useState와 비슷한 기능을 할 수 있으나, useState는 하나의 컴포넌트 안에서만 사용되므로 자칫하면 props 지옥이 될 수 있는데, 이를 해결할 수 있는 것이 redux다. redux는 모든 컴포넌트 상의 상태변화를 관리할 수 있다.

store : 정보가 저장되는 곳, 하나의 store

• state : 직접 접속할 수 없음 (useSelector 통해 접근)
• reducer : state와 action을 인자로 받아서 가공, reducer가 리턴하는 값이 새로운 state값
• dispatch : action을 넘겨 reducer 호출

render : state값을 참조해서 UI를 만듦

---

<counter app 만들기>

+ 버튼을 누르면 숫자가 증가
- 버튼을 누르면 숫자가 감소

useState를 사용할 수 있는 예제지만 간단하게 redux를 익히기 좋다.

1. npm install

npm install @reduxjs/toolkit react-redux

터미널에 입력

<2022-7/2 작성일 기준>
react 18.0.0 react-redux 8.0.2 react-scripts 4.0.0 @reduxjs/toolkit 1.8.3

---

2. store 파일 생성하기

store을 생성하기 위해서는 {configureStore}이 필요하다.
또한 이 안에는 reducer가 들어가야한다.
(reducer가 dispatch로부터 받은 action을 가공해 store의 state들을 변경하므로)

---

[store.js]

import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
  reducer: {
    
  },
});

export default store;

---

reducer : {} 의 {}부분에 reducer을 넣어주어야한다. reducer를 만들러 가보자 !!

3. reducer 파일 생성하기 : creatSlice 이용

{createSlice}를 이용하면 action을 가공할 수 있는 reducer를 만들 수 있다. (+초기값까지 넣어줄 수 있음)

---

[my_reducer.js]

import { createSlice } from "@reduxjs/toolkit";

const userSlice = createSlice({
  name: "user",
  initialState: {number : 0},
  reducers: {
    increase: (state, action) => {
      state.number += 1;  // number 1 증가
    },
    decrease: (state, action) => {
      state.number -= 1; // number 1 감소
    },
  },
});

export default userSlice.reducer;
export const { increase,decrease } = userSlice.actions; 
// 구조분해할당

---

my_reducer.js는 궁극적으로 reducer를 내보내서 store을 생성하는데 쓰이고, action을 가공하는 함수를 내보내서 dispatch가 이 함수에 action을 인자로 받아 호출할 수 있도록 한다. 즉, dispatch에 의해 호출된 함수에 의해 action을 가공하여 새로운 state를 만들어내는데, 이를 위해 필요한 것이 reducer다.

reducer를 내보내줄 수 있으니 이제 store에 reducer를 입력해주자.

4. store 파일 완성하기

[store.js]

import { configureStore } from "@reduxjs/toolkit";
import userReducer from './my_reducer';

const store = configureStore({
  reducer: {
    user : userReducer
  },
});

export default store;

my_reducer.js에서 export dafault userSlice.reducer을 했으니 userReducer은 이를 받는다. 결국 store에 reducer까지 넣어준 셈이다.

5. {Provider}

[index.js]

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

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

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

<App/> 컴포넌트를 <Provider> <Provider/>로 감싸준다. 특히, <Provider store = {store} 과 같이 store을 import해서 store을 속성으로 설정해주어야 react가 인식할 수 있으므로 필수로 해주어야 한다.
또한, import {Provider} from 'react-redux' 도 해주어야 함을 확인하자 !

6. useSelector, useDispatch

{useSelector}는 state를 가져오기 위해 필요하며,
{useDispatch}는 action을 받아 reducer가 가공하기 위해서 필요하다.

import "./styles.css";
import { useDispatch, useSelector } from "react-redux";
import { increase, decrease } from "./my_reducer";

export default function App() {
  const dispatch = useDispatch();
  const number = useSelector((state) => state.user.number);
  const onClick_increase = () => dispatch(increase());
  const onClick_decrease = () => dispatch(decrease());

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>{number}</p>
      <button onClick={onClick_increase}>+</button>
      <button onClick={onClick_decrease}>-</button>
    </div>
  );
}

useSelector를 통해 state.user.number을 가져와 상수 number에 넣어주었고, 숫자의 변화는 {number}가 보여준다.
또한 useDispatch()는 상수 dispatch에 넣어주었다.
+,- 버튼을 각각 클릭하면 onClick 이벤트가 발생하고, dispatch를 통해 reducer가 state를 변화시키게 만들었다.(increase(), decrease() 함수)

7. 실행시킨 모습(codesandbox)

https://f38124.csb.app/