[Redux] Redux 기본

리덕스를 사용하려면 리덕스를 우선 설치해야 한다.

npm install redux

 

웹 브라우저에서 앱 상태를 관찰하고 디버깅할 수 있도록 redux-devtools-extension 툴을 설치한다.

npm install -D @redux-devtools/extension

 

앱 상태를 저장할 전역 스토어를 초기화 하기 위한 store 파일을 만든다.

 

createStore

앱 상태를 보관하는 redux 저장소를 반환하는 함수다.

세 개의 인자를 전달받는다.

reducer

현재 상태와 액션을 전달받아 다음 상태를 반환하는 함수다.

전달 받은 액션에 대응되는 작업을 하여 상태를 변경한다.

preloadedState

초기 상태이다.

enhancer

미들웨어나 서드파티 기능을 저장소에 추가하기 위해 지정한다.

Redux에 제공되는 인핸서는 applyMiddleware 뿐이다.

applyMiddleware 함수로 미들웨어를 거쳐 store를 생성할 수 있다.

 

import { createStore } from "redux";

function todos(state = [], action) {
  switch(action.type) {
    case "ADD_TODO":
      return state.concat([action.text]);
    default:
      return state;
  }
}

const store = createStore(todos, ["Use Redux"]);

 

react-redux

react에서 사용하려면 react-redux 패키지를 설치해야 한다.

해당 리액트 컴포넌트가 리덕스 스토어의 데이터를 읽을 수 있다.

npm install react-redux

Provider

하위 컴포넌트들에게 리덕스 스토어를 사용할 수 있게 하는 컴포넌트다. 

store 속성에 리덕스 스토어를 전달하면 된다.

SSR인 경우 serverState 속성으로 초기 상태를 전달할 수 있다.

import { Provider } from "react-redux";

<Provider store={store}>
  <App/>
</Provider>

 

useDispatch

리덕스 dispatch 함수를 반환하는 훅이다.

const dispatch = useDispatch();

액션을 dispatch하여 상태를 변경한다.

 

useSelector

리덕스 스토어 상태에서 데이터를 추출할 수 있는 훅이다.

인자로 selector 함수와 equality 함수를 전달한다.

useSelector는 리덕스 스토어를 구독하고 액션이 dispatch할 때마다 selector 함수가 실행된다.

useSelector를 사용한 컴포넌트는 상태가 변경되면 리렌더링이 된다.

 

이때 selector 함수는 순수 함수로 제공해야 한다.

selector 함수는 리덕스 스토어에 접근하여 원하는 상태를 가져올 수 있다.

이는 곧 useSelector의 반환값이다.

 

상태값이 같더라도 state 객체 자체는 다르기 때문에 리렌더링이 되는 걸로 방지하기 위해 equality 함수를 전달하여 불필요한 리렌더링을 방지할 수 있다.

equality 함수 반환값이 true면 리렌더링을 하지 않고 false이면 리렌더링을 한다.

equality 함수로 흔히 사용되는 것이 react-redux에서 제공하는 shallowEqual 함수다.

상태값 내용이 같으면 true을 반환한다.