redux로 todo 만든 후기.

1) redux는 react와 별개이다. 다른 라이브러리에서도 사용이 가능하다.

 

 

2) reducer는 함수여만하고 reducer 함수의 return값으로 내 state를 변경한다. 

그것이 state를 바꾸는 유일한 방법이다.

 

 

3) reducer에서 두 번째 인자로 받는 action은 객체이다

 

 

4) createStore로 만든 store 변수는 getState 함수와 subscribe 함수를 쓸 수 있는데,

subscribe 함수는 store의 state 함수가 변화됐을 때,

 

인자값으로 넣은 함수를 작동하게 할 수 있다.

 

5) reducer에 로직은 if else 보다 switch case가 더 효율적이다.

 

 

6)

redux의 dispatch 함수는 같은 파일 내에서는 저렇게 호출해줄 수 있다.

 

store 변수에 createStore 함수를 할당하면

 

해당 식별자로 dispatch 함수를 사용가능하다.

 

물론 다른 파일에서 mapStateToProps 함수로 사용할 때는,

 

props로 사용해야한다.

 

 

 

7)

사실상 redux의 핵심 내용 중 하나일것이다.

 

reducer는 바뀐 store 변수들을 return해야지, mutate시키면안된다.

 

저렇게 spread operator같은 해체 기능으로

 

배열이나 객체 등이 같은 주소값이 아닌 다른 주소를 가진 변수로 만들어 return해준다는 개념을 잊으면안된다.

 

 

 

8)

다른 js 파일에서 mapStateToProps 함수를 생성하고 해당 함수를

 

connect 함수의 인자로 넣는것은,

 

결국 해당 컴포넌트에서 props로써 store 변수를 사용하기 위함이다.

 

다만 저 mapStateToProps 함수에서 store에서 전송되지않은

 

새로운 변수(위 사진에서는 sexy)를 저렇게 return되는 객체에 집어넣어서 

 

props로 사용할 수 있다.

 

ownProps는 react-redux 최신 버전부터 없어진 기능이다.

 

 

 

 

9)

mapStateToProps와 mapDispatchToProps 함수를 connect 함수에 넣고,

 

거기에 반환되는 함수에 다시 현재 컴포넌트를 인자로 집어넣으면,

 

해당 컴포넌트에서 props라는 객체로 store 변수들과 dispatch 함수들을 사용이 가능한데,

 

컴포넌트 안에서 props를 console.log로 찍어보면

 

역시 저런 객체가 담겨있다.

 

 

즉, props는 mapStateToProps 함수가 return하는 객체에 들은 store 변수들과

 

mapDispatchToProps 함수가 return하는 dispatch 함수들을 프로퍼티로써

 

가지고있다.

 

따라서 props.store 변수명 또는 props.dispatch 함수명( ) 이렇게 컴포넌트 내에서 사용이 가능하고

 

destructuring 문법으로 이름만 받아서도 사용이 가능하다.

 

 

 

10) 

값이 존재할지 아닐지 확신할 수 없을 때 저렇게 ?를 추가해줄 수 있다.

 

Optional Chaining이라고 함.

 

?에서 값이 없거나 falsy값이면 undefined를 남김.

 

 

 

11)

 

redux-toolkit이라는 라이브러리가있는데 redux의 코드양을 줄여주고

state 변경 시 reducer에서 값을 복사해 변경하고 return하는게 아닌

 

바로 mutate해서 state를 변경할 수 있도록해주는 기능이 있다. 

 

나중에 필요할 때 살펴보면될것같다.