TIL. Redux

REDUX?

Redux란? 기본적으로 Javascipt 어플리케이션들의 state를 관리하는 방법이다.

React와 많이 사용하면서 유명해졌으나 React와는 별개의 라이브러리.
JS를 사용하는 여러 곳에서 사용이 가능하다.

How to use?

1. npm i redux or yarn add redux

2. import {createStore} from "redux";

3. store 생성
   ex)const store = createStore();

   Store?
   store는 data를 저장하는 공간을 생산. state는 application에서 변하는 data를 뜻함.

4. createStore는 reducer를 요구함.
   ex)const store = createStore(reducer);

   Reducer는 data를 modify 해주는 함수로 reducer가 return하는 것은 application에 있는 data가 됨.

5. reducer의 parameter로 첫번째 인자에 state, 두번째 인자에 action을 줌.

   ✅ Action : reducer와 소통하기 위한 방법
   ✅ Reducer에게 Action을 보내는 방법 : store.dispatch({key: value});
   ✅ 현재 state값을 가저오는 방법 : store.getState();

6. 변화된 값을 출력 : store.subscribe(function);

   Subscribe : store 안에 있는 변화 감지, store안의 변화를 감지하면 func 실행

React-Redux

mapStateToProps

✅ store와 component를 연결한다.

mapStateToProps함수를 생성, 첫번째인자 = state, 두번째 인자로 ownProps를 줄 수 있다.

ownProps = connect한 컴포넌트의 props를 가져옴.

mapDispatchProps

store.dispatch() 의 기능을 함. 인자로 dispatch, 두번째 인자로 ownProps를 줄 수 있다.
dispatch()을 호출하는 함수를 array형태로 생성, 생성된 function을 props로 전달한다.

const mapDispatchProps = (dispatch) => {
  return { 
    addToDo: (text) => dispatch(actionCreators.addToDo(text)) 
  };
};

export default connect(mapStateToProps,mapDispatchProps)(컴포넌트);로 해당 컴포넌트에 전달 및 dispatch함.
만약 mapState만 필요하지 않다면?
export default connect(null,mapDispatchProps)(컴포넌트);