리덕스
-자바스크립트의 state를 관리하는 라이브러리
-React, Angular, Vue.js 등 자바스크립트 어디에서는 사용 가능
-state를 mutate(변형)하지 않고 새로운 object를 리턴해야 한다
ex) store.push() = X
[return [...state, {type : "ADD"}] = O
>> npm install react-redux //리액트 리덕스 설치
redux - <count.js>
※store : data가 저장되는 state
※createStore() : store를 생성하는 함수
※reducer : data를 수정(modify)하는 함수
※ action : reducer에게 명령을 내리는 매개변수
-type : 명령 이름 지정
(count -> state, countStore -> store, countModify -> reducer)
import { createStore } from "redux";
const countModify = (count = 0, action) => { //state 값을 0으로 지정
switch (action.type) {
case "ADD": //count 증가
return count + 1;
case "MINUS": //count 감소
return count - 1;
default:
return count;
}
};
const countStore = createStore(countModify); //store 생성
export default countStore;
page - <reduxCount.js>
※useSelector : react-redux store의 state 데이터를 가지고 옴
import React from "react";
import { useSelector } from "react-redux";
function ReduxCount() {
const count = useSelector((state) => state);
return (
<div>
<button>증가</button>
<span> 카운트 : {count} </span>
<button>감소</button>
</div>
);
}
export default ReduxCount;
<App.js>
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import ReduxCount from "./page/reduxCount";
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route index element={<ReduxCount />}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
<index.js>
※Provider : 다른 컴포넌트에서 Redux store를 사용할 수 있게 해줌
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import countStore from "./redux/count";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={countStore}>
<App />
</Provider>
);
'노마드코더 > React-Redux' 카테고리의 다른 글
3. Redux Toolkit (0) | 2024.05.14 |
---|---|
2. useDispatch (0) | 2024.05.12 |