[Javascript] 리덕스(Redux) 알아보기

 

리덕스(Redux)란?

   - 자바스크립트 어플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구

이미지 출처 https://redux.vlpt.us/2-1-redux-devtools.html

리덕스 devTools 사용하기

- 리덕스를 이용하여 중앙집중식 state 관리를 할때 리덕스 devtools(크롬 확장 프로그램)을 설치하면 

  해당 웹애플리케이션을 사용할때의 state 변화를 구동 시작부부터 확인할수 있다.(서버 내리기전 언제든지)

- 데이터를 json형태로 받거나 아니면 반대로 데이터를 임의적으로 넣어 보는 것도 가능하다.

✔ 기본개념 - 리덕스에서 사용되는 키워드 숙지하기

var store = Redux.createStore(
    reducer
);

var state = store.getState();

1. 스토어(Store)

   직접 액세스하거나 변경할 수 없는 단일 중앙 집중식 상태(single, centralized state)

   즉, 전역객체(global JS object)라고 말할 수 있다.

   .getState : state값을 호출할때 사용

 

function reducer(state, action){
    if(state === undefined){
        return {color:'yellow'}
    }
    var newState;
    if(action.type === 'CHANGE_COLOR'){
        newState = Object.assign({}, state, {color:action.color});
    }
    console.log(action.type, action, state, newState);
    return newState;
}

2. 리듀서(Reducer)

   전역 상태를 변경하고 업데이트하는 로직이 포함된 순수함수 리듀서(Reducer)

   - Reducer는 반드시 이전의 데이터(상태)와 Action을 매개변수(입력값)로 받는다.
   - Reducer는 결과값으로 이전의 데이터를 변경시키지 않고 새로운 데이터(객체)를 만들어 반환한다.

 

순수함수란?
- 함수가 실행되는 곳이 어디서든, 언제든 외부의 상태를 변경하지 않으면서 동일한 입력값에는 동일한 결과값을 반환해야 한다.

 store.dispatch({type:'CHANGE_COLOR', color:'blue'});

3. 액션(Action)

   리듀서 함수가 실행되도록 트리거하기 위해 디스패치(dispatch)될 수 있는 액션(Action)

 

4. 디스패치(Dispatch)

   리듀서를 호출해서 state를 변경한다. (리듀서 호출시 현재 state와 action을 전달한다.)

store.subscribe(blue);

5. 구독(Subscriptions)

   전역 상태에서 데이터를 가져오기 위한 구독(Subscriptions)

 

 

✔ 정리 - 리덕스의 흐름

 

subscribe(상태 변화 감지요청) >> action(상태 변화) >> dispatch(상태업데이트, store에 action 전달)

>> Store(state 갱신) >> listener(상태 변화 알림) >> 컴포넌트 리렌더링

 

1. 추가, 삭제와 같은 각각의 액션타입 정의

2. 액션 함수는 각각의 액션 type과 파라미터를 입력받아, 액션을 객체지향 형태로 반환

3. 상태변화가 필요해질 때, 디스패치가 액션을 발생시켜 스토어에게 알림

4. 스토어로 전달된 액션은 스토어의 리듀서 함수 호출

5. 호출된 리듀서 함수는 (이전상태, 액션타입)을 파라미터로 전달받아,
6. 정의된 로직대로 현재 상태값을 변화시켜 변화된 상태를 반환

7. 반환된 상태는 스토어에 저장

 

✔ 리덕스를 사용하는 이유

데이터가 스토어에 집중화(Centralized) 되어 있어서 예측 가능하며(Predictable),

데이터 흐름이 단방향이라서 디버깅하기 쉽다(Debuggable).

 

< Redux 의 3 원칙 >

1. Single source of truth
    애플리케이션 내에 Store는 반드시 1개 뿐. Store는 반드시 1개만 존재한다.

2. State is read-only
    state를 직접 변경해서는 안.된.다.
    state를 변화시키는 유일한 방법은 Action을 Reducer에 dispatch(송신, 전달)하는 방법 뿐이다.
    즉, state의 변경은Reducer만 할 수 있다. Reducer 이외의 공간에서는 state는 읽기 전용인 것이다.

3. Changes are made with pure functions
    Reducer는 순수 함수여야만 한다.
    Reducer 함수는 parameter로 기존의 state와 Action을 받는데, 

    Reducer 함수는 기존의 state를 직접 변경하지 않고, 새.로.운 state object(객체)를 작성해서 return해야한다.

 

---

객체의 복사 :

Object.assign(빈객체, 복사할 객체, 추가할 객체), 빈객체에 복사+추가되어 데이터를 가진 객체(주소는 빈객체)가 반환된다.

 

배열의 복사 :

    1. concat() 함수

         const arr = [1, 2, 3]; const newArr = arr.concat('a', ['b', 'c'], 'abc');

    2. ... spread operator (전개 연산자) 

         const newArr = [ ...arr1, ...arr2, ...arr3 ];
    3. push() 함수와 spread operator
         const arr1 = [1, 2, 3];

         const arr2 = [4, 5, 6];

         arr1.push(...arr2);

         result : arr1[1,2,3,4,5,6]

---

출처 👇👇👇

리덕스 기본개념

 

강의정보  👇👇👇 

플랫폼 : 인프런

강의 : 생활코딩 - Redux

강사 : Egoing Lee

url : https://www.inflearn.com/course/redux-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9