Redux

Redux

fromslow 2021. 7. 29. 22:35
Redux란

 

Redux는 애플리케이션의 복잡성을 낮춰 결과를 예측가능하게 만들어주는 글로벌 상태 관리 라이브러리이다.

 

 

 

 

 

 

Redux 설치

 

터미널에서 아래 명령어를 실행한다.

npm i redux

 

 

 

 

 

Redux의 특징

 

- 한 곳에서 데이터를 중앙집중관리한다.
- 상태를 바꾼다.
- 외부에서 직접 제어할 수 없어 예기치않게 값이 바뀌는 문제를 차단한다.
- 다른 컴포넌트에 상태를 알려준다.

 

 

 

 

 

 

 

Redux 관련 개념

 

1. state(상태)

- 리덕스 애플리케이션의 전체상태를 나타내는 단어

- store에 의해 관리된다.

- state는 직접 접근하여 조작할 수 없다.

 

 


2. store(스토어)

- 모든 state 정보가 저장되는 곳

- 애플리케이션 상태 트리를 가지고 있는 객체.

- 리덕스 앱에서는 단 하나의 스토어만 가지고 있어야 한다.

- createStore 함수를 이용해서 스토어를 생성하고, 인자로 reducer 함수를 전달해주어야 한다.

 

 

 

3. action(액션)

- 상태를 변화시키려는 것을 표현하는 객체

- 상태를 변화시키기 위해서는 액션을 생성해야한다.
- 스토어에 데이터를 넣는 유일한 방법이며, type 필드를 반드시 가져야 하고, 그 뒤에 사용자가 넣고 싶은 데이터를 자유롭게 넣을 수 있다.

아래와 같이 선언한다.

{
  type: "counter/INCREASE", //필수
  value: 1
}

 

 


4. action creators(액션 생성자)

- 액션 생성자는 액션을 만드는 함수이다.

- 액션을 만들기만 할 뿐 스토어에 실제 요청을 보내지는 않음


아래와 같이 선언한다.

const increase = value => ({
  type: "counter/INCREASE",
  value: value
})

 



5. dispatch

- 액션을 인자값으로 받는 함수이다. 

- 인자값으로 받은 액션을 스토어의 리듀서에게 보내 상태 관리를 요청한다.

아래와 같이 액션을 발생시켜 상태 관리를 요청한다. 

store.dispatch(increase(10))

 

 

 

6. subscribe

- subscribe는 해당 state와 관련된 함수를 구독하여 상태 변경이 발생했을 때 이 함수들을 호출하게 된다.

- 아래 코드는 state가 바뀔 때마다 red라는 함수를 호출한다는 의미이다.

store.subscribe(red);

 



7. Reducer(리듀서) ★

- 실제 상태 변화가 발생하는 함수이고 dispatch를 통한 요청을 받으면 실행되는 함수이다.

- 해당 액션 객체의 type값에 따라 특정 로직을 실행시키고, 새로운 상태를 만들어 반환한다.

- state와 action을 이용해서 새로운 상태값을 반환하는데 이 때, 새로운 상태값은 원본을 복제한 결과를 return하게 된다. 즉, 불변성을 유지하고 원본을 복제하여 새로운 상태값을 덮어씌워야 한다.

 

 

 

 

 

 

 

Redux의 큰 흐름

 

0. store.js 파일을 만들고 스토어를 생성한다.

Redux.createStore 메서드를 이용하며 reducer 함수를 전달해야한다.

const store = Redux.createStore(reducer);

 

 

1. store의 초기 state값을 getState 함수를 통해 가져와 화면에 표시한다.

const state = store.getState();

 

 

 

2. 어떤 이벤트로 인해 상태값이 변경되게 할 때, 변경할 값을 action(객체)으로 만든다.

<button type="button" onClick="store.dispatch({type: 'CHANGE_COLOR', color: 'red'})">fire</button>

 

 

 

3. dispatch

 

dispatch의 인자값으로 action을 전달하고 dispatch는 reducer에 상태 관리 요청을 한다.

요청을 받은 reducer는 state(기존)와 action(전달받은 값)을 이용하여 새로운 state 값을 반환한다.

function reducer(state, action) {
        //초기값 지정
        if (state === undefined) {
          return { color: 'yellow' };
        }

        //복제된 결과가 return
        let newState;
        if (action.type === 'CHANGE_COLOR') {
          newState = Object.assign({}, state, { color: action.color });
        }
        return newState;
}

 

 

 

4. subscribe

dispatch는 state가 바뀌면 subscribe 함수를 호출하여 새롭게 갱신된 state 값을 화면에 반영하도록 한다.

 

 

 

 

 

 

출처

- 생활코딩 Redux 예제 참고 https://youtube.com/playlist?list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc

- https://edu.goorm.io/lecture/16422/가장-핫한-fe-라이브러리-react-가지고-놀아보기