리덕스 키워드

BackEnd_Ash.log·2020년 6월 15일
0

리덕스

목록 보기
1/3

패스트캠퍼스 리액트 강의를 보고 정리를 했습니다.

Action

  1. 상태 업데이트 할때 어떻게 업데이트를 해야할지에 대한 정보를 가지고 있다.
    액션에는 타입이라는 값이 필수적으로 존재한다.
    나중에 상태를 업데이트할때 여기 타입을 보고 어떻게 업데이트 할것인지 정하게 된다.

  1. 타입 외에도 다른 값을 넣어줄수가 있다.
    타입값은 필수적으로 있어야 하며 , 다른 값들은 우리가 자유롭게 넣어 줄수가 있다 .

액션이라는 것은 우리가 업데이트를 해야할때 우리가 어떻게 업데이트를 해야할지 정의하는 객체입니다.

액션 생성함수

액션 생성함수는 말 그대로 액션을 만들어 주는 함수입니다.
단순히 파라미터를 받아와서 액션객체를 만들어 주는 함수이다.

예를들어서 addTodo 라는 함수를 만들게 된다면 ,
data 라는 파라미터를 받아와서 ,

return {
  type : "ADD_TODO",
  data
};

이런 객체를 만들어 준다.

화살표 함수로도 가능하다.
리덕스를 사용할때 액션 생성함수를 만드는것이 필수는 아니다.

그러나 만약에 액션생성함수를 사용하지 않는다면 ,
액션이 발생할때마다 직접 액션 객체를 작성해줘야한다.

리듀서 ( Reducer)

  • 변화를 일으키는 함수이다.
  • 두가지 파라미터를 가지고 온다.
  • 액션타입을 가지고 다른 업데이트 작업을 하게 된다.
  • 불변성을 유지해줘야한다.
    (ex: state 가 숫자가 아니라 , 객체이거나 배열일때 , spread 연산자를 사용하는 등을 이용해서 불변성을 지켜줘야한다. )

store

리덕스를 사용하게 된다면,
한 어플리케이션 에 하나의 스토어를 만들게 된다.
스토어 안에는 현재 앱의 상태와 리듀서가 들어있습니다.

디스패치 ( dispatch)

  • 액션을 발생시킨다
  • 액션을 스토어에 전달한다.
  • dispatch 라는 함수에는 액션 생성자함수 또는 액션을 파라미터로 전달한다.

getState

스토어의 내장함수로서 현재 스토어의 state를 가져올 수있다.

const store = createStore(리듀서);
store.getState(); // 현재의 state 를 리턴

subscribe

스토어의 내장함수로서 함수 형태의 값을 파라미터로 받아온다.
subscribe 함수에 특정 함수를 전달하면 , 액션이 디스패치 되었을 때마다 전달해준함수를 호출한다.
subscribe 의 리턴으로는 unsubscribe 라는 점을 주의해야하지만

unsubscribe 는 잘 사용하지 않는다.

import { createStore } from 'redux';

const store = createStore(리듀서);

const unsubscribe = store.subscribe(()=>{
  store.getState(); // store 의 상태가 변할때마다 현재의 상태를 호출
});

unsubscribe();  // 구독취소
profile
꾸준함이란 ... ?

0개의 댓글