0. TIL
▶ props의 drilling의 대안으로 스토어에 저장해서 사용하면서 사용하는 리덕스.
▶ 리덕스는 action > dispatch > reducer 순으로 동작한다
▶ 디스패치를 사용하기 위해서는 useDispatch를 import하고 dispatch의 인자 = action 객체로 넣어주기
▶ dispatch를 counter.jsx에서 함수로 만들어서 App.jsx에서 함수실행으로 간단하게 사용 가능
[파일 정리]
redux 폴더 : 리덕스 관련 모든 코드
(1) config 폴더: 리덕스 설정 관련 파일 전부
(1-1) configStore : 중앙 stata 관리소 -> 설정 코드 (.js)
(2) modules 폴더 : state의 그룹
▼ 리덕스 설정 및 useSeletor로 데이터 가져오기 ▼
React : 리덕스 설정 및 useSeletor
0. State (1) Local State (지역상태) : 컴포넌트에서 useState를 이용해서 생성된 state (2) Global State (전역상태) : 중앙 state 관리소 (props로 전달하지 않아도 사용 가능함) 1. 리덕스란? - "중앙 state 관리소"를
zerotonine2da.tistory.com
1. app.jsx
import { useDispatch, useSelector } from 'react-redux';
import './App.css';
import { PLUS_ONE } from './redux/modules/counter';
import { MINUS_ONE } from './redux/modules/counter';
function App() {
//state : 중앙저장소 전체의 state-> [ConfigStore.js] -> Counter가 있음
const counter = useSelector((state) => {
return state.counter;
});
//dispatch가져오는 방법
const dispatch = useDispatch();
return (
<>
<div>현재 카운트: {counter.number}</div>
<button
onClick={() => {
//+1을 해주는 로직
//dispatch: action객체를 store에 던져주는 역할
dispatch({ type: ' PLUS_ONE ' }); //인자로 action 객체를 넣어줘야함
}}
>
+
</button>
<button
onClick={() => {
dispatch({ type: 'MinusOne' }); //인자로 action 객체를 넣어줘야함
}}
>
-
</button>
</>
);
}
export default App;
▶ store에 접근하여, counter의 값을 읽어오고 싶음 + useSelector (hook) 사용
▶ PLUS_ONE 방식을 추천 / minusOne 비효율적
▶ 'PlusOne" 이렇게 하면 추후에 변경을 다해 줘야해서 import {PLUS_ONE}으로 해주고 대신 사용하기를 추천
[위치 : counter.jsx]
//action value
export const PLUS_ONE = 'PLUS_ONE'; //외부에서도 사용하기 위해서
export const MINUS_ONE = 'MINUS_ONE';
▶ 이렇게 counter.jsx 파일에서 지정 후 export 해주기
더 좋은 방법!
[위치 : counter.jsx]
//action creator : action value를 return하는 함수
export const plusOne = () => {
return {
type: PLUS_ONE,
};
};
[위치 : App.jsx]
<div>현재 카운트: {counter.number}</div>
<button
onClick={() => {
dispatch(plusOne());
}}
>
+
</button>
▶ dispatch를 counter.jsx에서 함수로 만들어서 App.jsx에서 함수실행으로 간단하게 사용 가능
2. counter.jsx
//초기 상태값 (state)
const initialState = {
number: 0,
};
//리듀서 : 'state에 변화를 일으키는' 함수
// (1)state를 action의 type에 따라 변경하는 함수
//input : state와 action
//action =type +value : state를 어떻게 변경할건지?
const counter = (state = initialState, action) => {
switch (action.type) {
case 'PlusOne':
return {
number: state.number + 1,
};
case 'MinusOne':
return {
number: state.number - 1,
};
default:
return state;
}
};
export default counter;
▶ counter 변수의 리턴값은 객체로 해줘야함
▶ {number : state.number +1}을 해줘야 정상적으로 0 -> 1 -> 2 가 됨
3. configStore.jsx
import { createStore } from 'redux';
import { combineReducers } from 'redux';
import counter from '../modules/counter';
const rootReducer = combineReducers({
counter,
});
const store = createStore(rootReducer);
export default store;
▶ 중앙 stata 관리소 -> 설정 코드 (.js)
4. index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './redux/config/configStore';
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
reportWebVitals();
▶<Provider store = {store} 넣어주기
끝.
