03-17 코딩일기

HoJJANG94·2023년 3월 17일
1
post-thumbnail

<본격적인 Redux & Redux-tollkit 공부>

 기본개념 이해를 위해 Redux 공식문서 & 인터넷 강의 & 잘 만들어진 문서들을 통해 Redux의 생애주기를 파악하고 기본적인 문법을 먼저 보았다.
액션 (Action)
상태에 변화가 필요할 때 발생시킴 (객체한개로 표현)
> type 필수 , 그 외 자유작성

액션 생성함수 (Action Creator)
컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함
> 필수 아님

리듀서 (Reducer)
상태 변화를 일으키는 함수
현재의 상태와 액션을 참조하여 새로운 상태를 반환

스토어 (Store)
한 애플리케이션당 하나의 스토어 (한 개의 공장이라 생각하기)
현재의 앱 상태와, 리듀서, 내장함수 포함

디스패치 (dispatch)
스토어의 내장함수
액션을 발생 시키는 것 (상태변화)

구독 (subscribe)
스토어의 내장함수
subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출
(리액트에서는 connect 함수 또는 useSelector Hook 을 사용

기본적인 redux 사용법

1) npm install redux 
 리액트 사용시 "npm install react-redux" 도 설치

2) store.js (스토어)
 import { createStore } from 'redux';
 const store = createStore(rootReducer) 

3) 위 rootReducer는 전역적으로 reducer를 관리 (리듀서)
<rootReducer.js> -> 여러 reducer 를 사용시 함께 관리
import { combineReducers } from "redux" -> combineReducers 는 여러 리듀서 합채주는것
예를 들어서 reducer 를 두개 (viewReducer, subReducer 사용시) -> key 값에 명명하고, import 해온 reduecer넣기
const rootReducer = combineReducers({
    views: viewReducer,
    subs: subReducer
})

4) <rootActions.js> -> action을 통합적으로 관리
export { addSub, removeSub, initSub } from '../subscrips/actions';
export { addView } from '../views/actions';

5) <types.js> -> view & sub (타입)
export const ADD_SUB = "ADD_SUB" 이런식으로 타입 지정

6) <actions.js> -> 각각의 action (액션)
export const addSub = () => {
	return {
		type: import해온 type 넣기
	}
}

7) <App.jsx> -> 최상위 index 아래 컴포넌트
import { Provider } from 'react-redux' -> Provider 로 감싸야 redux 사용가능
import store from './redux/store'

Provider 에는 store 를 할당 {store} 는 전체 관리할 store(createStore)로 만든 것
component 위에 return (
	<Provider store={store}>
    	{childer Component}
	</Provide>
)

ㅡ^ 까지가 단계별로 나누어 본 redux 사용법
계속하여 redux 미들웨어 사용법도 올려보도록 하겠다.

공부는 미리 하고 복습하고 .. 까먹지말자 ㅠㅠ 🌩️

  redux -> redux-tollkit -> recoil & mobx 등..
  다뤄보아야 할 상태관리 라이브러리가 많다...
profile
안녕하세요 신입 프론트엔드 개발자 입니다.

0개의 댓글