기본개념 이해를 위해 Redux 공식문서 & 인터넷 강의 & 잘 만들어진 문서들을 통해 Redux의 생애주기를 파악하고 기본적인 문법을 먼저 보았다.
액션 (Action)
상태에 변화가 필요할 때 발생시킴 (객체한개로 표현)
> type 필수 , 그 외 자유작성
액션 생성함수 (Action Creator)
컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함
> 필수 아님
리듀서 (Reducer)
상태 변화를 일으키는 함수
현재의 상태와 액션을 참조하여 새로운 상태를 반환
스토어 (Store)
한 애플리케이션당 하나의 스토어 (한 개의 공장이라 생각하기)
현재의 앱 상태와, 리듀서, 내장함수 포함
디스패치 (dispatch)
스토어의 내장함수
액션을 발생 시키는 것 (상태변화)
구독 (subscribe)
스토어의 내장함수
subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출
(리액트에서는 connect 함수 또는 useSelector Hook 을 사용
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 미들웨어 사용법도 올려보도록 하겠다.
공부는 미리 하고 복습하고 .. 까먹지말자 ㅠㅠ 🌩️