npx create-react-app learn-redux
npx
는 어디에 효과적일까?
create-react-app같은 보일러 플레이트 모듈에 효과적 입니다. npx를 통해 create-react-app을 설치할 경우에는 매번 최신 버전만을 가져와서 설치해 주기 때문에 지금 어떤 버전을 사용하고 있는 지 신경쓸 필요가 없어집니다. 어짜피 최신 버전만을 사용할 테니까요.
npm install redux react-redux
redux
: 실제 상태 관리패키지
react-redux
: react와 redux를 연결하는 기능
STORE
ACTION
REDUCER
DISPATCH
store
: 프로젝트의 모든 state를 가지고 있다 / 어디서든 쓸 수 있는 모든 state / 데이터가 담긴 저장소
action
: what you wanna do
예를 들면, 카운터가 되는 것을 만들 것인데 여기서 기본값은 0 버튼을 누르면 1씩증가 / 증가되는 행동의 이름
행동하는게 아니라, 행동을 설명하는 것
reducer
: 액션이 상태를 다음 상태로 변환하는 방법을 설명
일어날 일을 액션이라고 부르고 리듀서는 어떤 액션을 수행했는지 확인
dispatch
: 액션과 리듀서를 확인해서 무엇을 할지 확인한 후 store를 업데이트
필요없는 파일들 정리한 후,
provider로 감싼 곳에서 리덕스 사용 가능
import { createStore } from 'redux';
import allReducers from './reducers';
import { Provider } from 'react-redux';
const store = createStore(allReducers)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
예를 들면, 증가하는 기능이니까 이름도 증가
대문자로!
액션은 객체를 반환하는 함수
함수의 이름을 정해준다!
// ACTION INCREMENT
const increment = () => {
return {
type: "INCREMENT"
}
}
const decrement = () => {
return {
type: "DECREMENT"
}
}
state는 0, action,type이 해당함에 따라 retrun 값이 바뀐다.
defalut값 꼭 설정해줘야함!
// REDUCER
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1
case "DECREMENT":
return state - 1
default:
return state;
}
}
export default counterReducer;
카운터의 상태를 0으로 설정할 수 있도록 state = 0;
매개변수에 작업을 수행해야하니까 action을 넣고
이름에 따라 작업내용이 달라지니까 switch문을 사용
또 다른 함수이다.
기본값은 false고, action에 따라 리턴값이 달라짐
const loggedReducer = (state = false, action) => {
switch (action.type) {
case 'SIGN_IN':
return !state;
default:
return state;
}
}
export default loggedReducer;
각각의 함수들을 하나로 모은다.
combineReducers
!
import counterReducer from "./counter";
import loggedReducer from "./isLogged";
import { combineReducers } from "redux";
const allReducers = combineReducers({
counter: counterReducer,
isLogged: loggedReducer
})
export default allReducers;
dispatch를 이용해서 상태 변화를 시킨다!
import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from "./actions";
function App() {
const counter = useSelector(state => state.counter)
const isLoggend = useSelector(state => state.isLoggend)
const dispatch = useDispatch();
return (
<div className="App">
<h1>Counter {counter}</h1>
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(decrement())}>-</button>
{isLoggend ? <h3>로그인하세요</h3> : ""}
</div>
);
}
export default App;
🔍 참고자료 : https://youtube.com/watch?v=CVpUuw9XSjY&feature=shares