npm install redux
npm install react-redux
index.js에 Provider를 넣어준다.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
store.js
import { createStore } from 'redux';
import reducer from './reduer/reducer';
let store = createStore(reducer);
export default store;
reducer.js
// 초기 값
let inititalState = {
count: 0,
};
function reducer(state = inititalState, action) {
// 두개의 매개변수를 받는다.
console.log('action은 뭘까?', action);
if (action.type === 'INCREMENT') {
return { ...state, count: state.count + action.payload.number };
}
if (action.type === 'DECREMENT') {
return { ...state, count: state.count - action.payload.number };
}
// switch (action.type) {
// case 'INCREMENT':
// return { ...state, count: state.count + action.payload.number };
// case 'DECREMENT':
// return { ...state, count: state.count - action.payload.number };
// default:
// return { ...state };
// }
return { ...state };
}
export default reducer;
app.js
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import Box from './component/Box';
function App() {
const dispatch = useDispatch();
const count = useSelector((state) => state.count);
const increase = () => {
dispatch({ type: 'INCREMENT', payload: { number: 5 } });
};
const decrease = () => {
dispatch({ type: 'DECREMENT', payload: { number: 3 } });
};
return (
<div>
<h1>{count}</h1>
<button onClick={increase}>증가</button>
<button onClick={decrease}>감소</button>
</div>
);
}
export default App;