19일차 - 리덕스

in Study-siotz on TIL


추후에 정리가 필요한 문서입니다!!!

19일차

리덕스 Redux

벨로퍼트-리덕스

리덕스는 Flux에서 많이 따왔다.

리액트와 잘 맞아서 리액트리덕스가 세트인것 같지만, 리덕스는 리액트가 아닌곳에서도 사용할 수 있다.(바닐라 자스 가능)

Context API로도 상태관리는 가능하다.

리덕스의 미들웨어를 사용하고 그래야 정말 좋다.

부모가 중간자 역할을 하고 있는데, 이 중간자 역할이 바뀔것이다.

Action

스토어가 어던 변화를 일으켜야하는데, 이런 변화를 일으켜 줘 하면서 주는 설명서다

객체이다.

이름이 액션이라서 뭔가 하는 애 같지만 그건 아니구 걍 데이터 객체다

스토어에서 이 액션(객체)를 받게 되면 액션 안에 있는 변화할 객체 내용을 보고 변화를 시킨다.

Action Creator 액션 생성자 / 액션생성함수

보통 액션생성함수의 이름은 type이랑 똑같이 만든다.

액션을 만드는 함수일 뿐!! 액션은 아니다!!

Dispatch

리덕스의 내장함수가 아니고 리덕스 스토어에 있는 내장함수이다!

store.dispatch 해야 나온다!

액션은 그냥 객체이기 때문에 디스패치(불러오는 행위 그 자체)를 해주지 않으면 그저 객체 데이터일뿐이다.

액션을 디스패치한다 => 상태를 바꾸는 변화를 일으킨다.

액션을 파라미터로 전달한다.

dispatch(action) 이런식으로

Reducer 리듀서

상태 변화를 실제로 일으키고 상태변화를 하는 로직을 가지고있는 애다.

현재 스토어의 상태와 액션을 파라미터로 받는다.

액션을 참고해서 실행하기 때문에 액션을 받는당

리듀서는 절대적으로 순수함수여야한다.

똑같은 값을 받았을 때 항상 똑같은 값을 반환해야한다.

  1. 초기상태값을 설정해주어야한다.
  2. 만약에 반환하는것이 객체일 때 우리가 받은 prevState를 바꾸면 안된다.
Object.assign(obj1, obj2, obj3)

Object.assign() 첫번쨰 객체가 바뀐다.

반환값의 참조는 첫번째 인수(obj1)이다. 똑같은 키가 있으면 덮어씌워지고 obj2에만 있는 키가 있으면 그 키가 추가된다.

obj2d의 내용이 obj1에 덮어씌워지고 obj1이반환되고, obj3이 obj1에 덮어씌워지고 덮어씌워진 obj1이 반환된다.

그래서 첫번째 인수엔 꼭 빈객체를 넣어줘야한다. state를 넣으면 상태가 바뀌기때문에

Store 스토어

스토어 안에는 내장함수가 있습니다.

dispatch도 내장함수

getState() 현재 스토어에 있는 상태에(현재 상태)에 접근

subscribe()

잘 안 쓴다. 왜냠 리액트에서는.. connect() 때문에 알아서 호출되니까…. 리액트가 아닌 다른데서 쓴다면 이 함수를 자주 쓸것이다.

createStore(리듀서)

스토어를 생성할 때. 리듀서를 파라미터로 받습니다. 애플리케이션당 하나의 스토어.

리액트 없이 쓰는 리덕스

Edit Vanilla JS Redux Boilerplate

리덕스와 리액트를 같이 쓰기

  1. 스토어는 한개 2.상태는 읽기 전용
  2. 변화를 일으키는 함수, 리듀서는 순수한 함수

connect()

connect()는 함수를 반환하는 함수인 고차함수입니다. 반환되는 함수는 특정 컴포넌트에 설정된 props 를 전달해주는 함수입니다. 따라서, connect()(특정컴포넌트) 형태로 작성하게됩니다.

connect() 는 함수 f를 반환하고 이 함수 f의 매개변수로 들어갈 특정컴포넌트를 connect()(인수로들어갈특정컴포넌트)

mapStateToProps

상태 객체를 props로 넘겨준다.

첫번째 인수 : 스토어의 상태 전ㅊㅔ 두번째 인수 : 이 컴포넌트가 받은 props 전체 전체 상태랑 props 중에 그 컴포넌트에서 쓰고싶은 상태랑 props만 걸러서 특정 컴포넌트에 props로 전달한다.

function mapStateToProps(state, ownProps?) {
  const { a } = state 
  // 첫번째 인수. 스토어의 전체 상태에서 a라는 키를 갖고있는 상태만 빼서 a라는 이름으로 저장?
  const { b } = ownProps
  // 두번째 인수. 컴포넌트가 받은 props중에서 b라는 키의 prop만 빼서 특정 컴포넌트로 전달.
  return { 
    a, b
  }
}

반환한 객체가 prop에 넣어져서 위에서 또 인수로 받은 특정컴포넌트에 전달된다.

mapDispatchToProps

mapDispatchToProps는 연동될 컴포넌트가 상태를 바꾸기위해 사용할 함수를 컴포넌트에게 props로 전달해줍니다. 여기서 ‘상태를 바꾸기 위해 사용할 함수’란, 자동으로 dispatch되는 액션 생성자를 뜻합니다. 아~까~ 봤던 바인딩된 액션 생성자인 셈이죠.

bindActionCreators()