개발공부/리액트

[리액트] 리덕스 개념 정리

햄❤️ 2021. 3. 30. 10:36
728x90

1) 리덕스 개념과 용어

 리덕스: 데이터 한군데 몰아넣고 여기저기에서 꺼내볼 수 있게 해줌! 전역에 저장한 데이터 모음들을 아무데서나 참조할 수 있다.

 - State: 리덕스에서 저장하고 있는 상태값=데이터, 딕셔너리 형태임 ({[key]: value})

 - Action: 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할때) 발생하는 것. 액션은 객체, type은 이름

 - ActionCreattor: 액션생성함수, 액션을 만들기 위해 사용! 액션을 리턴한다

 - Reducer: 리덕스에 저장된 상태(데이터)를 변경하는 함수

컴포넌트의 액션생성함수 호출 -> 액션을 만들면 -> 리듀서가 현재상태(데이터)와 액션객체를 받아서 -> 새로운 데이터를 만들고 -> 리턴

 - Store: 프로젝트에 리덕스를 적용하기 위해 만들었다. 리듀서/현재 애플리케이션 상태/리덕스에서 값을 가져오고 액션을 호출하기 위한 몇가지 내장함수가 포함되어있음

 - dispatch: 액션을 발생시키는 스토어의 내장함수!!, 컴포넌트들의 액션 생성 함수 호출 = 디스패치!!! 

 

 

 

2) 리덕스의 3가지 특징

 - store는 1개만 쓴다 = 단일스토어규칙

 - store의 state(데이터)는 오직 action으로만 변경할 수 있다. = 데이터의 불변성을 유지한다

 - 어떤 요청이 와도 리듀서는 같은 동작을 해야한다! -> 리듀서는 순수한 함수여야한다! 파라미터가 같으면 항상 같은 값을 반환

 

 

 

3) 상태관리 흐름

 - 리덕스 Store를 Component에 연결한다 (구독한다)

 - Component에서 상태변화가 필요할때 Action을 부른다(디스패치)

 - Reducer를 통해서 새로운 상태값을 만들고(리듀서 안의 함수를 실행)

 - 새 상태값을 Store에 저장한다

 - Component는 새로운 상태값을 받아온다(props를 통해 받아옴, 재랜더링된다)

 

 

 

4) 덕스구조 폴더 생성

src안에 redux 폴더 생성, redux 폴더 안에 modules 생성, modules 안에 액션 만들 파일 생성!, redux 폴더 안에 configStore.js생성

 

[순서]

 - Action 생성

 - InitialState 생성

 - Action Creator 생성

 - Reducer 생성

 - Store 생성

 

 

 

5) 모듈 생성

 - 액션 생성

 const 액션명 = "모듈명/액션명";

 const CREATE= "bucket/CREATE"; -> 액션명은 대문자!

 

- 이니셜 스테이트 생성 

초기값을 넣어준다. 없다면 빈 배열로 마무리

 const initialState = {
   list: []
}

 

- 액션 크리에이터 생성

//컴포넌트들이 쓸 수 있게 export 해준다! export만 해줄때는 {}로 import 해준다. export default는 파일당 1개만 내보낼 수 있다.
export const 액션크리에이터이름 = (받을 데이터) => {
	return {type:  , 받을 데이터 };
}

//예시
export const createBucket = (bucket) => {
	return {type: LOAD, bucket};
}

 

- 리듀서 생성

// action과 state를 따로 넘겨주지않을때 기본값 {}을 가져온다. 넣어주면 그 값을 가져온다.
export default function reducer(state={initialState}, action={}) {
	switch(action.type) {
    	case "모듈명/액션": {
        	return state;
        }
        default:
        return state;
    }
}

//예시 
export default function reducer(state={initialState}, action={}) {
	switch(action.type) {
    	case "bucket/LOAD": {
        	return state;
        }
        case "bucket/CREATE": {
        	const new_bucket_list = [...state.list, action.bucket]
            return {list: new_bucket_list};
        }
        default:
        return state;
    }
}

 

- Store 생성

 redux내에 configureStore 생성

import {createStore, combineReducers} from "redux";
import 모듈명 from "./모듈경로";
import {createBrowserHistory} from "history";

export const history = createBrowserHistory();

//리듀서들 합치기 = 루트리듀서 만들어주기
const rootReducer = combineReducers({모듈명1,모듈명2, 등});

//스토어생성
const store = createStore(rootReducer);

//스토어 export 할 수 있게 처리
export default store;

 

 

6) 컴포넌트에서 리덕스 데이터 사용 준비하기

  

index.js or App.js에서 import 먼저! 

 

import {Provider} from "react-redux"; 

import store from "./redux/스토어명";

 

 <App/>을 Provider로 감싸고 Provider에 store 주입

<Provider store ={store}>
	<BrowserRouter>
      <App/>
    </BrowserRouter>
</Provider>,

 

 

7) 함수형 컴포넌트에서 리덕스 데이터 사용하기

 

- 사용하고자 하는 함수형 컴포넌트에 useSelector() 적용하기, 그 전에 useSelector, useDispatch import

  import { useSelector, useDispatch } from "react-redux";
  const 리스트명 = useSelector(state => state.모듈명.스테이트);
  //모듈명에서 state 가져온다!
  
  //예시
  const bucket_list = useSelector(state => state.bucket.list);

-  상단에 useDispatch() 선언해준다.

onst dispatch = useDispatch();

가령 삭제하기 버튼에 액션을 달고싶다면

import {deleteBucket} from "./모듈경로";

onClick={()=>{
dispatch(deleteBucket(보내줄 값)
}}

//여기서 deleteBucket은 액션크리에이터에서 만들었던 이름

 

728x90