08. Redux(리덕스)

# What? 이게 뭔데?

- 상태관리 라이브러리

 

* 용어

- Dispatch(디스패치): 액션을 발생 시킴
- Action(액션): 상태에 어떤 변화를 일으킴

- Reducer(리듀서): 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환

- Store(스토어): 현재의 앱 상태와, 리듀서를 담고 있고, 추가적으로 상태관리를 돕는 내장 함수들이 내재되어있음

=> 디스패치로 액션을 일으키면 리듀서가 전달 받은 후 새로운 상태를 만들어내어 스토어에 저장되어있는 상태값을 업데이트

# Why? 이걸 왜 쓰는데?

- 어떤 컴포넌트에서든(전역적으로) 사용하고싶은 state가 있다면 Redux(리덕스)라는 state 관리 라이브러리를 사용.

ex. 유저 정보

 

# How? 어떻게 쓰는데?

* 초기엔 낯설고 어려우니 이런 틀로 만들어야하는구나 정도로만 받아들이길 권장

 

# 패키지 설치

$ npm install --save redux react-redux redux-thunk redux-devtools-extension

- redux, react-redux : 상태관리 라이브러리

- redux-thunk : redux로 비동기 처리도 다룰 수 있게 해줌(api 요청을 한다던지)

- redux-devtools-extension : 크롬 개발자도구로 redux 데이터 현황을 관찰할 수 있게 도와줌

# Action(액션) 세팅

@ redux/actions.js

export cosnt setFlash = (payload) => ({
		type: "SET_FLASH",
		payload: payload
	});

# Reducer(리듀서) 세팅

@ redux/reducer.js

const initialsState = { // 초기값
	flash: null,
	loading: false
};

const reducer = (state = initialsState, action) => {
	switch (action.type) {
		default:
			return state;
		
		{/*
        	action.type이 "SET_POP"이라면:oi
            action에 담겨온 data(payload)값을 pop이라는 state에 담겠다는 얘기
        */}
		case "SET_FLASH":
			return {
				...state,
				flash: action.payload
			};
	}
}

export default reducer;

-> action에는 보통 type과 payload가 담겨오는데 type은 호출할 작업명이 담겨오고, payload에는 데이터가 담겨옴

# store 세팅

@ store.js

import { createStore } from 'redux'

import reducer from './redux/reducer'

let store = createStore(reducer);

export default store

 

# index.js에 store 세팅(Provider로 감싸고 store 제공)

@ index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux'
import store from './redux/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

 

# 실제 컴포넌트에서 사용해보기

-> 컴포넌트에서 전역 state와 dispatch를 사용하려면 connect라는 함수로 연결을 시켜줘야함.

-> 그러면 컴포넌트의 props로 해당 state와 dispatch를 받을 수 있음

ex. export default connect(컴포넌트에서 사용할 state map 함수, 컴포넌트에서 사용할 dispatch map 함수)(컴포넌트명);

 

@ Example.js

import React, {} from 'react';
import { useDispatch, useSelector } from 'react-redux'
import {setFlash} from './redux/actions';

const Example = () => {
	const flash = useSelector(state => state.flash); // state 가져오기
	const dispatch = useDispatch(); // 디스패치 가져오기
    
	return (
		<div>
			Example: {flash}
			
			<button onClick={() => dispatch(setFlash("변경된 메세지"))}>메세지 전달</button>
		</div>
	);
};

export default Example;

@ Ohter.js

import React, {} from 'react';
import { useDispatch, useSelector } from 'react-redux';

const Other = ({flash, setFlash}) => {
	const flash = useSelector(state => state.flash); // state 가져오기
	const dispatch = useDispatch(); // 디스패치 가져오기
    
	return (
		<div>
			Other : {flash}
		</div>
	);
};



export default Other;

 

# Problem 과제

- 할일 목록 생성, 수정, 삭제 시 redux를 이용하여 각각에 따른 멘트 노출해보기

* 코드참고 : https://github.com/ShinHyungJune/react-course/tree/course-8-redux