- Redux는 자바스크립트 어플리케이션에서 예측 가능한 상태의 관리를 해주는 container이다.
- 상태 관리를 위한 전역 상태의 저장소를 제공한다.
- Redux는 react의 하위 라이브러리가 아니고, 자바스크립트 어플리케이션이라면 사용이 가능하다.
- 컴포넌트간의 정보 공유가 필요할 때, 복잡성을 줄이기 위해서 상태관리 라이브러리인 redux를 사용한다.
// NPM 으로 설치
npm install redux
// Yarn 으로 설치
yarn add redux참고 자료 : https://ko.redux.js.org/introduction/getting-started
Redux의 세 가지 원칙
- 1. Single Source Of Truth
redux에서 state는 모두 store에서 와야 한다.- 2. State is read-only
state를 수정할 때는 항상 action 객체를 사용해야 한다.
🍎 setState를 사용할 때 처럼 상태를 바로 수정하면 안된다.- 3. Changes are made with pure functions
reducer는 순수함수로 작성되야 한다.
side effect가 발생하면 예기치 못한 결과가 발생할 수 있다.
store
- 상태가 관리되는 오직 단 하나의 저장소이다.
- redux 앱의 state가 저장되어 있는 공간이다.
- createStore 메소드를 활용해 reducer를 연결할 수 있다.
import { createStore } from 'redux';
const store = createStore(rootReducer);Provider
- Provider를 통해서 store를 index.js에 연결시킨다.
- redux store 생성 후 Provider로 연결해주어야 한다.
import reducer from './redux/reducer';
import { Provider } from 'react-redux';
const store = createStore(reducer); // redux store 생성 후 Provider로 연결
// 크롬 확장 프로그램인 Redux Devtools을 사용하려면, 다음과 같이 작성한다.
// const store = createStore(reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
ReactDOM.render(
<React.StrictMode>
<Provider store = { store }>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
action
- simple 자바스크립트 객체이다.
- 어떤 행동을 할 것인지 미리 정의해 놓은 객체이다.
- type을 필수로 지정해 주어야 한다.
- store에 저장/수정할 값을 payload로 갖는다. (운반한다)
🧁 프로퍼티 키값의 이름은 꼭 payload일 필요는 없다.
{
type: ‘ADD_TO_CART’,
payload: {
"name": "apple",
"quantity": 1,
}
}dispatch
- action을 전달하는 메소드이다.
- dispatch의 전달인자로 action 객체가 전달된다.
- reducer를 호출해 state의 값을 갱신한다.
- dispatch의 인자로 action 객체를 반환하는 함수를 만들어 사용할 수도 있다.
const dispatch = useDispatch();
diapatch({
type: 'counting',
payload: {
"id" : 1,
"count" : 5,
},
});reducer
- action 객체의 type에 따라서 다른 동작을 한다.
- state와 action을 인자로 받아 새로운 state를 만들어 내는 pure function이다.
- switch 또는 if문으로 action의 type에 따라 분기한다.
- Redux의 state 업데이트는 immutable한 방식으로 변경해야 한다.
(ex. Object.assign으로 새로운 객체를 만들어 return해 변경한다.)
🌯 Redux의 장점중 하나인 변경된 state의 로그를 남기기 위해서 꼭 immutable한 방식으로 state를 업데이트해야 한다.
const itemReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TO_CART:
return Object.assign({}, state, {
cartItems: [...state.cartItems, action.payload]
})
default:
return state;
}
}action 객체는 dispatch에게 전달되고, dispatch는 reducer를 호출해 새로운 state를 생성한다.
action dispatch -> reducer -> new state in store
🥝 데이터는 한 방향으로만 흘러야 한다.
Redux의 장점
- 상태를 예측 가능하게 만들어준다.
- 유지 보수를 쉽게 해준다.
- action과 state의 log를 기록하면, 디버깅에 유리하다.
🍷 크롬의 확장 프로그램인 redux devtool을 이용하면 쉽게 확인할 수 있다.- 순수함수를 이용하기 때문에, 테스트를 붙이기 쉽다.
결과적으로 redux를 이용하면 전역상태 store를 사용할 수 있고, 이를 통해 lifting state up과 props driling을 해결할 수 있다.
Action, Reducer, Dispatch, Store의 연결
- Action, Reducer, Dispatch, Store을 연결하기 위해서 사용할 수 있는 두 가지 방법이 있다.
🍰 connect parameter를 통해 mapStateToProps, mapDispatchToProps 등 의 메소드를 이용한다.
🍪 useSelector나 useDispatch와 같은 Redux hooks를 이용하는 방법이 있다.
Redux hooks
- redux hook의 사용을 위해서 react-redux를 설치해준다.
npm i react-redux 또는 yarn add react-redux
useSelector()
- useSelector는 컴포넌트와 state를 연결한다.
- useSelector 메서드로 store의 state에 접근할 수 있다.
- useSelector는 전달인자로 콜백함수를 받는다. 이 콜백함수의 전달인자에는 state값이 들어간다.
- 콜백함수의 전달인자인 state의 값에서 원하는 객체의 값을 return 받아 사용한다.
🥧 모든 상태를 전달받기 위해서는 state를 return한다.
import { useSelector } from 'react-redux'
const state = useSelector(/* state를 인자로 갖는 콜백함수 */);
// state 내부에 store에 저장된 상태값들이 담긴다.useDispatch()
- useDispatch는 action 객체를 reducer로 전달해주는 메서드이다.
- 이벤트가 일어나는 컴포넌트에서 사용한다.
import { useDispatch } from 'react-redux'
const dispatch = useDispatch();
const handleClick(){
dispatch(/* action object */)
}
🍑 redux-thunk 미들웨어를 사용하면, 동기적으로 redux architecture를 구성할 수 있다.
🍑 redux-thunk 깃허브 : https://github.com/reduxjs/redux-thunk/
// 설치
npm install redux-thunk
또는
yarn add redux-thunk
// 불러오기
import thunk from 'redux-thunk';
참고자료 : 코드 스테이츠
🙌🙌🙌🙌