Redux란

1. 개념
2. 원리
3. 사용하기

개념

• 예측가능하고 유지가능한 글로벌 상태관리 JS 라이브러리
• 일관되게 동작하고, 다양한 환경(클라이언트, 서버, 네이티브)에서 실행되며, 테스트하기 쉬운 애플리케이션을 작성하는 데 도움이 됨.
  
  그림 출처

원리

• 리엑트는 단방향 통신이므로 state값을 전달 하려면 props를 통해 부모에서 자식에게만 전달이 가능하므로 props가 남발될 수 있다.
• 기존 리엑트 state의 한계를 보완하기 위해 store라는 저장소에다 state 값을 저장하고 어디에서나 store에 접근할 수 있게 한다.
• 컴포넌트에있는 state를 저장소에 접근하기에 몇개의 단계를 거친다.
  

1. Component에서 state에 줄 action을 이름과 매개변수를 객체형태로 useDispatch를 통해 보낸다.
2. 이 객체는 reducer에서 action이 되고
3. 해당 action에 대한 return값을 내보낸다.
4. store에 return이 된 모든 state 값을 객체로 저장한다.
5. Component에서 필요한 state를 useSelector로 호출한다.

• useDispatch의 매개변수는 객체 형태로 type - action 이름, payload - 매개변수 가 있다.
  
  

사용하기

설치

npm install redux react-redux

기본 설정

index.js

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

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

src > redux > store.js

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

let store = createStore(reducer);

export default store;

src > redux > reducer > reducer.js

• reducer은 기능에 따라 여러 파일로 만들기 위해 폴더 생성

let initialState = {};

function reducer(state = initialState, action) {}

export default reducer;