App.js
import React from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addNumber,minusNumber } from "./redux/modules/counter";
const App = () => {
const dispatch = useDispatch();
const [number, setNumber] = useState(0);
const globalNumber = useSelector((state) => state.counter.number);
const onChangeHandler = (evnet) => {
const { value } = evnet.target;
setNumber(Number(value));
};
const onClickAddNumberHandler = () => {
dispatch(addNumber(number));
};
const onClickMinusNumberHandler = () => {
dispatch(minusNumber(number));
};
return (
<div>
<div>{globalNumber}</div>
<input type="number" onChange={onChangeHandler} />
{}
<button onClick={onClickAddNumberHandler}>더하기</button>
<button onClick={onClickMinusNumberHandler}>빼기</button>
</div>
);
};
export default App;
counter.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
number:0
}
export const counterSlice = createSlice({
name:'counter',
initialState,
reducers:{
addNumber:(state,action) => {
state.number = state.number + action.payload;
},
minusNumber:(state, action) => {
state.number = state.number - action.payload;
}
}
});
export const {addNumber, minusNumber} = counterSlice.actions;
export default counterSlice.reducer;
configStore
import { configureStore } from "@reduxjs/toolkit";
import counter from "../modules/counter";
const store = configureStore({
reducer: {
counter,
},
});
export default store;
db.json
{
"todos": [
{
"id": 1,
"title": "json-server",
"content": "json-server를 배워봅시다."
}
]
}