Redux

Redux란?

Redux : 가장 사용률이 높은 Javascript 상태관리 라이브러리이다.

• 상태(state) : 간단하게 말하면 데이터이다. 컴포넌트 내부에서 사용하는 데이터 라고 할 수 있다.

프로젝트 규모가 커질수록 컴포넌트 개수도 많아지고, 컴포넌트간의 상태 관리도 어려워 지므로 Redux 는 store에 데이터를 관리하여 해당 store를 구독하는 컴포넌트는 언제든 해당 데이터를 사용할 수 있다.
-> 데이터를 컴포넌트에 종속시지 않고, 상태관리를 밖에서 할 수 있게함 !

기존의 MVC패턴은 어플리케이션이 복잡해 질 수록 양방향 데이터 흐름이 복잡해지고 버그가 많이 발생하게 되어, Redux는 기본적으로 단방향 데이터 흐름을 가진 Flux패턴 을 따른다.

Redux의 3가지 원칙

1. Single source of truth

   • 단일 스토어 사용을 권장 (하나의 애플리케이션에는 하나의 스토어)

2. State is read-only

   • 상태는 읽기 전용이어야 함
   • React에서 setState를 사용해 상태 변경이 가능하듯 Redux에서도 action이라는 객체를 통해서만 상태를 변경할 수 있다.
     ex.) 배열에 새로운 값을 넣어주어야 한다면, push가 아닌 새로운 배열로 교체하여 return해야함 !

3. Changes are made with pure functions
   • 리듀서는 순수한 함수이여야 함 (동일한 입력을 받았을 때 언제나 동일한 출력 내는 함수)
   • Reducer : 이전 상태와 동작을 받아 새로운 상태를 리턴하는 함수 (dispatch를 통해 action을 발생시켜 입력 받음)

• action : 상태에 변화를 주는것 (입력) -> action은 객체
• dispatch : 스토어의 내장 함수 중 하나로 action 객체를 넘겨줘서 상태를 업데이트함

Redux 시작하기

// index.js
import { Provider } from 'react-redux';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));

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

index.js에 Provider 태그로 App을 감싸준다.

Redux store

// store.js

// 상수로 정의하는것이 좋음
const ADD = "ADD";
const REMOVE = "REMOVE";

export const add = (text) => {
  return {
    type: ADD,
    text
  }
}

export const remove = (id) => {
  return {
    type: REMOVE,
    id: id
  }
}

// state 초기값, action
const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [{ text: action.text, id: Date.now() }, ...state]
    case REMOVE:
      return state.filter(item => item.id !== action.id);
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

• createSotre(reducer)로 Redux store를 생성할 수 있다.
• getState() 를 통해 현재 state를 가져올 수 있다.
• dispatch(action)을 사용하여, store의 reducer에 action을 전달한다. Redux에서 상태 변경을 일으킬 수 있는 유일한 방법이다
• store.subscribe(() => {}) 는 상태가 업데이트될 때마다 호출된다.

아래는 위에서 만든 Redux의 store를 사용하는 코드이다.

// Home.js
import { connect } from "react-redux"
import { add, remove } from "../store"

function Home({ data, add, remove }) {
  // add 함수 사용 부분 생략
  
  return (
      <div>
      	{state}
      </div>
    )
}
    
function mapStateToProps(state, ownProps) {
  return { data: state }
}

function mapDispatchToProps(dispatch, ownProps) {
  return { add: (text) => dispatch(add(text)) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

mapStateToProps와 mapDispatchToProps는 Redux의 상태(state)와 함수(dispatch)를 props로 넣어주도록 하는 함수이다.
하지만 요즘은 아래와 같이 React Hooks를 사용하여 손쉽게 Redux의 상태와 함수를 불러올 수 있다.

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

const toDos = useSelector((state) => state)
const dispatch = useDispatch();

추가로 위의 코드들을 좀 더 손쉽게 코딩할 수 있는 Redux toolkit이 존재하고 이 부분은 다음에 추가로 작성하려한다 !