Redux

Redux

---

1. Redux란?
2. 사용이유
3. 용어정리
4. Redux 흐름
5. Redux 스토어 구조

---

Redux란?

Javascript 상태관리 라이브러리

React 상태 관리 라이브러리로 가장 많이 사용됨

사용이유

• 모든 state props로 전달하는 경우
  • props 지옥, 각각의 div 서로에게 종속적
  • → 코드 복잡성, 로직 ⬆️
• 전역으로 상태 관리하는 경우
  • store에서 언제든지 꺼내 쓸 수 있음
  • → 코드 복잡성, 로직 ⬇️

용어정리

• Store : 상태 관리 공간 (유일), .getState(), .dispach(), .subscribe()  메서드 제공
• state : Redux 스토어에서 관리하는 상태(데이터)
• Action : 컴포넌트에서 dispatch 통해 전달되는 객체
  • type : 상태 변경을 설명하는 정보
  • payload : 교체 할 상태 값
• Dispatch() : Reducer 호출
• Reducer() : '이전 상태(prevState)'를 '새로운 상태(state)'로 교체(return)하는 함수(state가공자)

  // 리듀서 = (상태, 액션)
  // 액션 타입 분석 
  // 이전 상태 → 다음 상태로 교체 
  // 다음 상태 반환
  
  const reducer = (prevState = initState, action) {
    switch(action.type) {
      case INCREASE_COUNT:
        return prevState + 1
      case DECREASE_COUNT:
        return prevState - 1
      default:
        return prevState
    }
  }

• subscribe() : 상태 변경 구독(subscribe, 감지)하여 상태 업데이트 되면 등록된 listener render() 실행
• getState() : 스토어에 등록된 상태정보(state값) 가져오기

Redux 흐름

• state를 가져올 때
  1. store의 getState() 함수를 실행시킨다.
  2. getState() 함수는 store 안의 state를 읽고 그 정보를 가져와 반환해준다.
• state를 변경할 때
  1. 사용자(클라이언트)는 store의 dispatch 함수를 실행시킨다.
     - 이때, dispatch 함수를 실행할 때 무엇을 변경할지, 어떻게 변경할지에 대한 정보를 전달하는데 그 객체가 'action' 이다.
  2. dispatch 함수는 action객체를 받고, reducer 함수를 실행시킨다.
     - reducer 함수는 2개의 인자를 받는데 첫번째는 현재 state, 두번째는 dispatch에서 전달한 action 객체이다.
  3. reducer 함수는 action 을 토대로 state를 변경한 후, 변경된 state를 반환해준다.
  4. reducer 함수가 종료되면 dispatch 함수는 subscribe 함수에 등록된 render 함수를 실행한다.
  5. render 함수는 state를 가져와 사용자에게 보여준다. ( case 1 과 동일하게 )

// state 쓰기 : dispatch({action})
<form onsubmit="
	store.dispatch( { type: 'create', payload: {title: title, desc: desc} } ); ">

// 실제 state 변경 : Reducer
function reducer(state, action){
	if (action.type === 'create'){ 
    	// state = 
	}
}

// state 읽기 : getState
function render(){
	var state = store.getState();
    document.querySelector('#app').innerHTML = ``;
}

// render 등록 : subscribe
store.subscribe(render):

Redux 스토어 구조

store/
├── index.js # 스토어 엔트리 (스토어 생성 ← 루트 리듀서)
├── actions/
│   ├── index.js # 액션 엔트리 (액션 내보내기)
│   ├── actionTypes.js # 액션 타입 (액션 타입: 상수)
│   ├── counter.js
│   ├── todos.js
│   └── filter.js
└── reducers/
    ├── index.js # 리듀서 엔트리 ([루트 리듀서:병합] 내보내기)
    ├── counter.js
    ├── todos.js
    └── filter.js

---

• Redux CDN 호출: https://cdnjs.com/libraries/redux
• 전개연산자 …

// 배열을 풀어서 나열한 것에 data 추가
let boards = [...state.boards, action.data]; 

let boards = Object.assign(state.boards);
boards.push(action.data);

 

실습

 

 

 

 

---

추가 자료 

• 불변데이터 관리