Redux Study

개발순서

1. prop로 변수와 함수를 받을 애를 먼저 개발
2. 변수-action, 함수-reducer -> action과 reducer를 정의함
3. store 생성
4. container에서 connect
   • const CounterContainer = connect( mapStateToProps, mapDispatchToProps )(Counter);
   • mapStateToProps
   • mapDispatchToProps

Provider: react-redux 라이브러리에 내장되어있는, 리액트 앱에 store 를 손쉽게 연동 할 수 있도록 도와주는 컴포넌트

해당 프로젝트에서 redux, react-redux를 쓰려면 그 프로젝트 내부에서 yarn add redux react-redux 실행해서 항상 설치해줘야 함 안그럼 yarn start하면 못찾는다고 에러남

 

 

state, action이 있음 - SA

state는 action에 따라 변화함, state가 action에 따라 어떻게 변화는지를 정의한 함수가 reducer

이전 state, action -> (REDUCER) -> 바뀐 state

reducer함수는 state, action을 parameter로 받음

// 스토어를 만들 땐 createStore 에 리듀서 함수를 넣어서 호출 

• const { createStore } = Redux;
• const store = createStore(reducer);
• store를 만들고나면 store.getState()로 state를 가져올수 있음
• store.subscribe(render); //store를 구독할 때는 변화할때마다 실행된 listener(render)를 지정함
• btnIncrement.addEventListener('click', () => { store.dispatch(increment(25)); })//action 객체를 리턴함으로 action에 따라 state가 변하게 함
• store.dispatch -> action 리턴 -> action에 따라 state변함 -> state변화면 화면도 바뀜

 

Ducks구조

• src/actions/ActionTypes, index.js 이렇게 분리하지 않고 src/modules/index.js안에 통합

redux-action

• createAction: Action 객체 리턴하는 부분을 간략화
• handleAtions: reducer함수가 switch로 사용되어 각 액션에 따른 동작을 정의하는데 제한이 있는 문제를 해결