Redux

Redux란?

• 상태 관련 라이브러리
• 전역 상태를 관리할 수 있는 Store을 제공함으로써 하기와 같은 문제 해결
• 컴포넌트와 상태를 분리하는 패턴

Redux의 기본 구조

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
2. 이 Action객체는 Dispatch 함수의 인자로 전달됩니다.
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다.
4. Reducer함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
5. 상태가 변경되면, React는 화면을 다시 렌더링 합니다.

즉, Redux에선 Action→Dispatch→Reducer→Store 순서로 데이터가 단방향으로 흐르게 됩니다.

---

redux 설치

npm install redux

---

1. store 생성

store = date를 저장하는 곳

import {createStore} from "redux"

const store=createStore();

2. reducer 생성

1번 과정에서 createStore은 reducer 함수가 필요하다는 error가 뜸!

reducer = data를 modify해주는 함수로, reducer가 return하는 값이 application에 있는 data가 됨

import {createStore} from "redux"

const reducer = () => {};
const store = createStore(reducer);

3. action 생성

reducer함수가 어떻게 data를 변경할지 방법을 취해주는 객체

{type: “ADD”}형태로 객체여야 함!!

import {createStore} from "redux"

const reducer = (count=0, action) => { //undefined이기 때문에 초기 데이터값 지정
	if(action.type==="ADD") {
		return count+1;
	} else if(action.type==="MINUS"){
			return count-1;
		} else {
			return count
		}
};

const store = createStore(reducer);

//refactoring
import {createStore} from "redux"

const ADD = "ADD";  //실수로 오타를 낼 시, 에러를 띄우기 위해 변수로 선언 
const MINUS = "MINUS";

const reducer = (count=0, action) => { //undefined이기 때문에 초기 데이터값 지정
	switch(action.type){
		case ADD:
			return count+1;
		case MINUS:
			return count-1;
		default:
			return count;
	}
};

const store = createStore(reducer);

4. dispatch 생성

reducer함수에게 action객체를 전달해줘서 communicate하게 해주는 함수

import {createStore} from "redux"

const reducer = (count=0, action) => { 
	if(action.type==="ADD") {
		return count+1;
	} else if(action.type==="MINUS"){
			return count-1;
		} else {
				return count
			}
};
const store = createStore(reducer);

store.dispatch({type:"ADD"});
store.dispatch({type:"ADD"});
store.dispatch({type:"ADD"});
store.dispatch({type:"ADD"});
store.dispatch({type:"ADD"});
store.dispatch({type:"MINUS"});

console.log(store.getState()); //4가 출력됨

5. subscribe 생성

store 안에 있는 변화 감지

const onChange = () => {
	number.innerText = store.getState();
}

store.subscribe(onChange);

---

Redux Hooks

• Store, Reducer, Action, Dispatch 개념들을 연결시켜주는 역할
• React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드 제공
  • useSelector()
  • useDispatch()

useDispatch()

useDispatch()는 Action 객체를 Reducer로 전달해주는 Dispatch 함수를 반환하는 method입니다. (상태 변환)

import { useDispatch } from 'react-redux'

const dispatch = useDispatch()
dispatch( increase() )
console.log(counter) // 2

dispatch( setNumber(5) )
console.log(counter) // 5

useSelector()

useSelector()는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 method입니다. (상태값 조회) 

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옵니다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state)
console.log(counter) // 1

---

[예고편]
Redux Toolkit ? → Redux 코드양을 줄이기 좋은 패키지