[JS] Redux 리덕스

Redux 란

리덕스는 JS 상태 관리 라이브러리입니다.

쉽게 설명하면 모든 컴포넌트에서 바로 state에 접속 가능한 저장소 입니다.

(도서관에서는 다양한 사람들이 책을 빌려갈 수 있습니다)

 

상태?

component 안에서 관리되는 것

 

사용하는 이유

자식 컴포넌트가 많아지면, 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈

리덕스를 사용하면 state를 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다.

 

기본 용어

- Store (스토어)

상태가 저장되는 저장소

 

- Reducer (리듀서)

특정 action에 따라서 state값을 변경하는 함수

이벤트 핸들러와 비슷

파라미터는 state, action 두개를 받음

 

- Action (액션) - 주문서

store에 운반할 데이터

 

- Dispatcher(디스패처)

dispatch() 메소드를 사용해 action을 reducer에 전달

: 스토어에 상태를 변경하라고 말해줌

컴포넌트에서 사용된다.

 

동작 방식

1. action객체가 dispatch 메소드에 전달

2. dispatch를 통해 reducer를 호출

3. reducer를 통해 state 변경

4. 변경되면 리렌더링

 

3 원칙

1. 애플리케이션의 모든 상태(state)는 하나의 저장소(store) 안에 하나의 객체 트리 구조로 저장된다.

하나의 저장소(store)가 존재하며, 이 저장소(store)에는 애플리케이션의 모든 상태들이 객체 트리 구조로 저장되어 있다.

 

2. 상태(state)는 읽기 전용(read-only)이다.

상태(state)는 읽기 전용이다. 상태를 변화시키는 유일한 방법은 액션 객체를 전달하는 방법뿐이다.

 

3. 변화는 순수 함수로 작성되어야 한다.

리듀서는 그저 이전 상태와 액션을 받아 다음 상태를 반환하는 순수함수이다. 이전 상태를 변경하는 것이 아니라, 새로운 상태 객체를 생성해서 반환해야한다는 사실을 기억해야 한다.

 

createStore를 손코딩 해보세요

const store = createStore(reducer)
const reducer = (state, action) => {
	switch(action.type) {
		case "ADD" :
        	return state+1;
        case "MINUS" :
        	return state-1;
		default :
        	return state
	}
}

 

React-redux에서는 뭐가 다른가 !

1. store.js 파일 만든다.

2.  index.js파일에서 <Provider store={import한것}> 으로 <App /> 을 감싸준다.

3. useSelector : store에 저장된 state가져오기

4. useDispatch : dispatch 사용하기 위함

import { useSelector, useDispatch } from "react-redux";
import { changeName } from "../store";

function 컴포넌트() {
    let state = useSelector((state) => { return state })
    let dispatch = useDispatch();
    
    ...
    
    return (
    	<div>
            <button onClick={ () => { dispatch(changeName()) }}>
            버튼
            </button>
        </div>
    );
}

 

redux toolkit 

1. createSlice

: state를 생성할 수 있다.

2. configureStore()

모든 컴포넌트가 마음대로 사용 가능하게 해줌

import { configureStore, createSlice } from '@reduxjs/toolkit'

let 변수 = createSlice({
    name: 이름변수,
    initialState: 'hello',
    reducers : {
    	changeName(state) {
        	return '변경하기 ' + state
        }
    }
});

export let { changeName } = 변수.actions

export default configureStore({
	reducer: {
    	변수2: 변수.reducer
    },
});

 

 

redux-saga

redux-saga는 redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 미들웨어입니다.

• 미들 웨어란 ?
  • action이 발생하면 reducer가 액션을 처리하기 전에 다양한 작업을 할 수 있다.

조금더 까다로운 상황에서 유용함

1. 비기존 요청을 취소 처리 할 수 있습니다
2. 웹소켓을 사용할 때
3. API 요청이 실패시 재요청해야할 때

이 외에도 다양한 까다로운 비동기 작업들을 redux-saga를 사용하여 처리 할 수 있습니다.

 

Generator 문법

• Generator 함수는 함수의 흐름을 도중에 멈춰놓았다가 나중에 이어서 진행 할 수 있음
  • 제너레이터 함수를 만들 때에는 function* 이라는 키워드를 사용합니다.
  • 제너레이터 함수를 호출했을때는 한 객체가 반환되는데요, 이를 제너레이터라고 부릅니다.
  • 제너레이터 함수를 호출한다고 해서 해당 함수 안의 코드가 바로 시작되지는 않습니다. generator.next() 를 호출해야만 코드가 실행되며, yield를 한 값을 반환하고 코드의 흐름을 멈춥니다.