[리덕스] 리덕스 알아보기

리덕스

- 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너

- 리액트 뿐만아니라 앵귤러, 제이쿼리 등 다양한 프레임워크와 작동되게 설계됨.

 

키워드

 

1. 액션(Action)

- 상태에 어떠한 변화가 필요하게 될 땐, 액션이란 것을 발생시킴.

- 하나의 객체로 표현되며, type 필드를 필수적으로 가지고 있어야 함.

- 어플리케이션의 store(스토어), 즉 저장소로 data를 보내는 방법.

// action의 type을 정의
const Acion_type = 'Acion_type'

//action
{
 type:'Acion_type'
}

 

2. 액션 생성함수(Action Creator)

- 파라미터를 받아와서 액션 객체 형태로 만들어주는 함수

- 어떤 변화를 일으켜야 할 때 마다 액션 객체를 만들어야 하는데,

- 번거로운 작업에다가 만드는 과정에서 실수로 정보를 놓칠 수 도 있다.

- 이를 방지하기 위해 이를 함수로 만들어서 관리(리듀서)

function ActionCreator(text) {
  return {
    type: Action_Type,
    text
  }
}

 

3. 리듀서(Reducer)

- 현재 상태와 액션객체를 파라미터로 받아와 변화를 일으키는 함수.

- 두 값을 참고하여 새로운 상태를 만들어서 반환

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

4. 스토어(Store)

- 한 애플리케이션 당 하나의 스토어

- 현재의 앱 상태와, 리듀서가 들어가있음.

 

5. 디스패치(dispatch)

- 스토어의 내장함수 중 하나.

- 액션을 발생 시키는 것.(액션을 파라미터로 전달)

- 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어줌.

 

6. 구독(Subscribe)

- 스토어의 내장함수 중 하나.

- subscribe 함수에 리스너 함수를 파라미터로 전달해주면, 이 리스너 함수가 액션이 디스패치 되었을 때 마다 호출 됨.

 

 

 

출처

 

https://react.vlpt.us/redux/01-keywords.html

1. 리덕스에서 사용되는 키워드 숙지하기 · GitBook

https://medium.com/@jsh901220/react%EC%97%90-redux-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-a8e6efd745c9

React에 Redux 적용하기(1)