input加算機能実装

src/App.jsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import "./App.css";
+import { decrement, increment, incrementByAmount } from "./redux/counterSlice";
+
+function App() {
+  const count = useSelector((state) => state.counter.value);
+  const dispatch = useDispatch();
+  const [incrementAmount, setIncrementAmount] = useState("2");
+  return (
+    <div className="App">
+      <h1>count:{count}</h1>
+      <input
+        type="number"
+        onChange={(e) => setIncrementAmount(e.target.value)}
+        value={incrementAmount}
+      />
+      <button onClick={() => dispatch(increment())}>+</button>
+      <button onClick={() => dispatch(decrement())}>-</button>
+      <button
+        onClick={() => dispatch(incrementByAmount(Number(incrementAmount)))}
+      >
+        追加
+      </button>
+    </div>
+  );
+}
+
+export default App;

src/redux/counterSlice.js

@@ -12,7 +12,10 @@ export const counterSlice = createSlice({
     decrement: (state) => {
       state.value -= 1;
     },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload;
+    },
   },
 });
-export const { increment, decrement } = counterSlice.actions;
+export const { increment, decrement, incrementByAmount } = counterSlice.actions;
 export default counterSlice.reducer;