TIL-30

20210713 리덕스 정리

리덕스란?

- 아주 흔히 사용하는 상태관리 라이브러리 - 전역 상태관리를 편히 할 수 있게 해줌

리덕스 패키지 설치하기

yarn add redux(리덕스 코어) react-redux(보조 패키지)

리덕스 개념과 용어

- 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해준다

State

• 리덕스에서는 저장하고 있는 상태값(데이터)을 state라고 부르고, 딕셔너리 형태로 보관한다.

Action

• 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생

//액션은 객체 / type은 이름 / 임의의 문자열
{type: 'CHANGE_STATE', data: {...}}

ActionCreator
액션 생성 함수라고도 부른다. 액션을 만들기 위해 사용

//이름 그대로 함수!
const changeState = (new_data) => {
// 액션을 리턴
	return {
		type: 'CHANGE_STATE',
		data: new_data
	}
}

Reducer

• 리덕스에 저장된 상태(데이터)를 변경하는 함수
• 액션 생성 함수를 부르고 > 액션을 만들면 > 리듀서가 현재 상태(=데이터)와 액션 객체를 받아서 > 새로운 데이터를 만들고 > 리턴

const initialState = {
	name: 'mean0'
}
function reducer(state = initialState, action) {
	switch(action.type){
		// action의 타입마다 케이스문을 걸어주면, 
		// 액션에 따라서 새로운 값을 돌려줌
		case CHANGE_STATE: 
			return {name: 'mean1'};
		default: 
			return false;
	}	
}

Store

• 프로젝트에 리덕스를 적용하기 위해 만든다
• 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함
• 생김새는 딕셔너리 혹은 json처럼 생겼다

dispatch

• 많이 사용되는 스토어의 내장 함수
• 액션을 발생시키는 역할

dispatch(action); 

리덕스의 3가지 특징

1. store는 1개만 쓴다. 리덕스는 단일 스토어 규칙을 따른다. 2. store의 state(데이터)sms 오직 action으로만 변경할 수 있다. - 리덕스에 저장된 데이터 = 상태 = state는 읽기 전용 - 가지고 있던 값을 수정하지 않고, 새로운 값을 만들어서 상태를 갈아끼운다. 3. 어떤 요청이 와도 리듀서는 같은 동작을 해야한다. - 리듀서는 순수한 함수여야 한다. - 파라미터 외의 값에 의존하지 않아야 한다. - 이전 상태는 수정하지(건드리지) 않는다(변화를 준 새로운 객체를 return 해야한다.) - 파라미터가 같으면 항상 같은 값을 반환 - 리듀서는 이전 상태와 액션을 파라미터로 받는다.

상태관리 왜 필요할까?

- 리덕스는 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용하다. - 데이터를 관리하는 로직을 컴포넌트에서 빼면, 컴포넌트는 정말 뷰만 관리할 수 있다. - 코드가 깔끔해지고, 유지보수에도 좋다.

상태관리 흐름

1. 리덕스 Store를 Component에 연결한다 2. Component에서 상태 변화가 필요할 때 Action을 부른다. 3. Reducer를 통해서 새로운 상태 값을 만들고, 4. 새 상태값을 Store에 저장한다 5. Component는 새로운 상태값을 받아온다.

덕스(ducks) 구조

action, actionCreator, reducer src 폴더 아래에 redux라는 폴더를 만들고, 그 안에 modules라는 폴더 만들기
modules 아래에 *******.js 리덕스 모듈 파일 만들기
1. Action
2. initialState
3. Action Creator
4. Reducer
5. Store - redux 폴더 하위에 configStore.js 파일을 만들고 스토어 만들기

//configStore.js
import { createStore, combineReducers } from "redux";
import *** from './modules/***';
import { createBrowserHistory } from "history";
// 브라우저 히스토리를 만들기
export const history = createBrowserHistory();
// root 리듀서 만들기
// 나중에 리듀서를 여러개 만들게 되면 여기에 하나씩 추가
const rootReducer = combineReducers({ *** });
// 스토어 만들기
const store = createStore(rootReducer);
export default store;

리덕스와 컴포넌트 연결하기

index.js에서 스토어를 불러오고 > 리덕스 파일에 주입하기

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom';
// 우리의 버킷리스트에 리덕스를 주입해줄 프로바이더를 불러오기
import { Provider } from "react-redux";
// 연결할 스토어도 가지고 오기
import store from "./redux/configStore";
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();