[React] state 업데이트 로직을 따로 분리하는 Redux

state 업데이트를 Component와 분리하여 관리하는 Redux

 

이전 블로깅에서 useReducer에 대해 블로깅을 진행했는데

useReducer는 리액트 자체에서 제공하는 state를 관리하는 것으로 redux와 유사하다

 

reducer는 애플리케이션에서 상태를 관리하기 위해 Redux의 대안을 제공하는 내장 hooks이며,

Redux와 동일한 원칙을 따르고 있지만 비동기 작업 및 복잡한 상태 구조를 처리할 때 제한 사항이 존재한다

따라서 어떤것을 사용할지는 사용자의 몫!

둘의 차이점을 알고 싶다면 아래 블로그를 참고하면 좋을 것 같다

 

https://www.frontendmag.com/tutorials/usereducer-vs-redux/

useReducer vs Redux: A Detailed Comparison for State Management in React - Frontend Mag

 

---

 

[Redux를 사용하기 이전 설치]

npm install --save redux
npm install --save react-redux
npm intall --save @reduxjs/toolkit

- redux를 사용할 리액트 폴더에 설치해야 하는 패키지들이므로, 사용 전 설치해야 함

 

---

 

redux를 사용하는 방법은 useReducer와 크게 다르지는 않다

 

[App.js]

import './App.css';
// import {createStore} from 'redux';
import {configureStore} from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import Page1 from './Page1';

/*const initState = { // (1)
  data1 : 'NONE',
  data2 : 0
}*/

const reducer = (state, action) => {
  if(state === undefined){ // (1)
    return {
      data1 : 'NONE',
      data2 : 0
    }
  }

  const newState = {...state};
  
  switch(action.type){ // (2)
    case "STRING" : newState.data1=action.data; break;
    case "INT" : newState.data2=action.data; break;
    default:
  }
  return newState;
}

const store = configureStore({reducer}); // (3)
//const store = createStore(reducer); // (3)

function App() {
  return (
    <Provider store={store}> // (4)
      <div className='App'>
        <Page1/>
      </div>
    </Provider>
  );
}

export default App;

- 구조나 구성을 보았을 때 reducer와 크게 다르지 않은 것을 볼 수 있다

(1) state의 초기값 설정

: state의 초기값을 지금까지는 객체로서 따로 만들었지만, reducer에서 state가 존재하지 않을 경우 생성도 가능

: 만약 state를 객체로 만들어 사용할 경우 reducer에서 state를 전달할 때 state='initState'를 통해 state 변경이 가능 

 

(2) action의 타입에 따른 state 변경

: action에 따른 state를 변경하여 state 자체를 리턴

 

(3) configureStore를 리덕스 스토어 생성

: createStore 또는 configureStore를 이용해 reducer를 담아 리덕스 스토어를 생성

: ReactDom.render 부분에(그것을 전달하고자 하는 컴포넌트에) Provider 태그로 감싸 store를 전달

: 리덕스 스토어는 여러개 생성이 가능하나, 리덕스 개발도구를 사용할 수 없게 되기 때문에 리덕스의 장점을 살리기 위해 상태 관리를 위한 리덕스 스토어는 한 개만 생성하는 것을 권장

 

 

** 만약 reducer가 1개가 아닌 여러개인 경우 store를 어떻게 생성해야 할까?

: 이는 combineReducers()를 사용하여 묶어주면 됨

 

- redux에서 value는 addsubReducer를 통해 count는 countringReducer를 통해 state 값을 변경한다고 할 경우 아래와 같다.

위에서는 그냥 reducer의 이름만 넣어줬지만, 만약 state 별로 사용하는 reducer가 다를 경우에는 아래처럼 작성해야 사용 가능

export const rootReducer = combineReducers({
    value:addsubReducer,
    count:countingReducer
})

const store = configureStore({rootReducer});

- reducer를 combineReduccers를 통해 묶어준 다음 store에 지정해주면 됨

 

 

[Page1.js]

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

const Page1 = () =>{
    const data1 = useSelector(state=>state.data1); // (1)
    const dispatch = useDispatch(); // (2)
    return(
        <div>
            <h1>{data1}</h1>
            // (3)
            <button onClick={()=>dispatch({type:"STRING", data:'HONG'})}>문자열 변경</button>
            <Page2/>
        </div>
    )
}

export default Page1;

(1) useSelector를 통해 state 가져오기

: useSelector(state => state.모듈명)의 형식을 통해 상태값 반환이 가능

: 콤마(,)를 이용해 여러개의 상태값을 가져올 수 있음

 

(2) dispatch 메서드

: (3)에서 dispatch를 사용하기 위해 useDispatch()를 통해 dispatch 메서드를 선언

: action을 호출

 

* useSelector와 useDispatch를 사용함으로서 리덕스 스토어에 상태값을 관리하기 위해 값을 지정하고, 필요한 상태값을 반환해 불필요한 렌더링을 최소화하고, props 사용의 복잡함 해결이 가능