[React] Redux

Redux

; JS 앱을 위한 예측 가능한 상태 컨테이너

- 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도움

- 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공

 

React Redux 앱만들기

$ npx create-react-app my-app --template redux

Redux 코어 라이브러리 다운로드

$ npm install redux

Redux Toolkit 다운로드

$ npm install @reduxjs/toolkit

action의 reducer

; action을 주면, 그 action이 적용되어 달라진 결과를 만들어 줌

function reducer(previousState,action){
	return newState;
}

- action을 받아서 state를 리턴하는 구조

- 인자로 들어오는 previosState와 return하는 newState는 다른 참조를 가지도록 해야함

 

store를 만드는 함수

const store = createStore(리듀서);