Redux Toolkit 이해하기 - vanila javascript에서 써보기

https://youtu.be/0awA5Uw6SJE

- Redux is for Javascript applications
리덕스는 리액트에 국한되는 것이 아니다. 
앵귤러나 뷰, 자바스크립트에도 사용할 수 있는 자바스크립트 애플리케이션을 위한 라이브러리다.

-Redux is a state container
State는 앱의 모든 각각의 컴포넌트들이 공유하는 상태를 의미한다.
리덕스는 앱의 State를 저장하고 관리한다.

-Redux is Predictalble
리덕스는 애플리케이션이 업데이트 될 때 State 관리를 쉽게 한다.
예측가능하고 테스트 가능한 코드를 작성하도록 돕는다.

-Redux Toolkit 
Redux의 구성이 복잡하고, 코드를 작성하기 위한 코드(boilerplate code)가 많이 필요하며, 다른 패키지들의 설치가 필요한 단점이 있다.
Redux Toolkit은 추상화되어 있으며 복잡함을 줄여 쉽게 개발할수있게 한다.

-React-Redux 
React를 위한 Redux 공식 UI 바인딩 라이브러리 

 

See the Pen Untitled by JEONG (@cona) on CodePen.

 

 

 

vscode에서 쓰려면

yarn add redux 설치 후 사용 

 

createAction 

const increase = createAction('INCREASE');

• 주어진 문자열에 대한 액션 생성자 함수를 생성한다.
• dispatch로 넘기는 액션의 type이 'INCREASE'일때 increase함수를 실행한다는 의미

 

createReducer 

const counter = createReducer(0, {
  INCREASE: (state) => state + 1,
  DECREASE: (state) => state - 1,
});

switch 문을 대신한다. 초기상태와 액션생성함수를 매개변수로 받는다.

 

configureStore

const store = configureStore({ reducer: counter });

액션생성함수를 맵핑해서 store 에 저장

 

subscribe

const render = () => {
  counterHead.innerText = store.getState().toString();
};


store.subscribe(render);

store의 상태가 업데이트 될 때마다 render함수가 호출 됨
리액트 프로젝트에서는 subscribe함수를 직접 사용하지 않는다.(컴포넌트에서 리덕스 상태를 조회하는 과정에서 react-redux라이브러리가 이 과정을 대신함)

---

리액트를 다루는 기술 16장

 

리덕스의 세 가지 규칙

• 단일 스토어
  : 하나의 애플리케이션 안에는 하나의 스토어
  
  
•  읽기 전용 상태
  : 객체를 직접 수정하지 않고, 불변성을 유지하면서 새로운 객체를 생성해줌
  
  
•  리듀서는 순수한 함수
  : 이전 상태와 액션객체를 파라미터로 받으며 파라미터 이외의 값에 의존하지 않음
    이전 상태를 건드리지 않고 새로운 상태객체를 만들어 반환.
    똑같은 파라미터로 호출된 리듀서함수는 언제나 똑같은 결과 값을 반환해야 함
  * 리듀서 함수 내부에서 랜덤값을 만들거나, Date함수를 사용하여 현재시간을 가져오거나, 네트워크 요청을 한다면,
  같은 파라미터에 다른 결과 나올수 있으므로 사용하면 안된다. 이는 리듀서 함수 바깥에서 처리해야한다.
  네트워크 요청과 같은 비동기 작업은 미들웨어를 통해 관리한다. 

 

https://redux-toolkit.js.org/introduction/getting-started

https://codesandbox.io/s/counter-vanilla-redux-toolkit-sjouq?file=/index.html