안녕! 하세요 >.< 오늘은 오로지 저를 위해 redux 관련 개념들을 정리해보려고 합니다
리액트 공부를 시작하면서 redux도 살짝 맛보고 있는데 개념들이 넘 헷갈리네요
볼 때마다 새로워요
아무튼 redux 사용하기 전에는 props로 컴포넌트에게 값을 전달하는 형태를 주로 사용했는데, 리덕스를 사용하니까 컴포넌트에서 필요할 때마다 스토어에 접근해서 바로 사용할 수 있어서 좋더라구요
그래도 아직 어려운 건 마찬가지네요(?)
import {createStore} from "redux";
const store = createStore(reducers, composeWithDevTools());
function App() {
return (
<Provider store={store}>
<BrowserRouter>
<Routes>
<Route path="/" element={<Main />}/>
</Routes>
</BrowserRouter>
</Provider>
)
}
store.subscribe(() => console.log(store.getState()));
// 현재 state 값이 출력됩니다
// action type
export const ADD_TO_LIST = 'ADD_TO_LIST'
// action 생성 함수
export const addToList = (item: any) => ({
type: ADD_TO_LIST,
item
// 액션과 함께 전달되어야 할 값이 있을 경우 추가로 정의해줍니다
})
// ActionType.js
// 액션 타입은 주로 대문자로 작성합니다
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const ADD_TO_LIST = 'ADD_TO_LIST';
import {useDispatch} from "react-redux";
const dispatch = useDispatch();
...
axios(config)
.then(function (response) {
dispatch(addToList(response.data));
})
...
// 액션을 불러옵니다
import {ADD_TO_LIST} from "./Action";
// 초기 상태를 정의합니다
const initialState = {
list: []
}
// action type에 따라 state를 변경합니다
function reducers(state: list | undefined = initialState, action) {
switch (action.type) {
case ADD_TO_LIST:
return {list: action.item}
default:
return state
}
}
주의할 점
우리는 절대 state를 직접 변경하면 안됩니다. getState()로 현재 state를 가져올 수는 있지만 state에 직접 접근해서 변경하는 것은 불가능합니다.
따라서 기존 state 값을 변형하는 것이 아닌, 새로운 state를 생성하는 방식을 사용해야 합니다.
// action type 선언
const ADD_TO_LIST = 'ADD_TO_LIST'
// action 생성 함수
export const addToList = (item: any) => ({
type: ADD_TO_LIST,
item
})
// 초기 상태 선언
const initialState = {
list: []
}
export default function reducers(state: list | undefined = initialState, action) {
switch (action.type) {
case ADD_TO_LIST:
return {list: action.item}
default:
return state
}
}
위의 내용들을 한 줄로 요약하자면,
user가 특정 action을 실행시키면 dispatch 함수를 통해 action이 reducer에게 전달되고, reducer 함수에 정의된대로 state 값이 업데이트된 후 store에 저장됩니다
리덕스 아직 많이 사용해보진 않았지만 되게 편리한 것 같네요 (?)
아직 모르는게 더 많아서 틀린 내용이 있을 수 있으니 열심히 지적해주세요
끗