解決したいこと
redux/reducer.js 内のファイルに 'num' is not defined.という表示が出るのを解決したい。
発生している問題・エラー
react + reduxttokit を使用し、送金アプリを作成しています。 redux/reducer.js 内のファイルを記述しています。 ログインユーザーが、自身の口座に入出金するソースコードを書いていたら、 'num' is not defined.という表示が出ます。 解決方法を教えて下さい。
//redux/reducer.js
import { createSlice } from "@reduxjs/toolkit";
//ログインユーザーが自身の口座に入出金する
export const counterSlice = createSlice({
name: "currentUser",
initialState: {
count: 0,
},
reducers: {
increase: (state) => {
//numのとろこに〜が出て、'num' is not defined.という表示が出る。
state.count += num;
},
decrease: (state) => {
//numのとろこに〜が出て、'num' is not defined.という表示が出る。
state.count -= num;
},
},
});
const initialState = {
idCount: 1,
todos: [{ id: 1, name: "addTodos", money: "balance" }],
};
const addTodoReducer = createSlice({
name: "todos",
initialState,
balance: 0,
reducers: {
//ここでは、reducerを書く。
//todoを追加
addTodos: (state, action) => {
return {
...state,
todos: [...state.todos, action.payload],
};
},
//todoを削除
removeTodos: (state, action) => {
return {
...state,
todos: state?.todos?.filter((item) => item.id !== action.payload),
};
},
},
});
export const { increase, decrease } = counterSlice.actions;
export const { addTodos, removeTodos, updateTodos } = addTodoReducer.actions;
export const reducer = addTodoReducer.reducer;
//src/components/Todos.js
import React, { useContext, useState } from "react";
import { connect } from "react-redux";
import { addTodos } from "../redux/reducer";
import { Box, TextField, Button } from "@mui/material";
import { AuthContext } from "../auth/AuthProvider";
const mapStateToProps = (state) => {
return {
todos: state?.todos,
};
};
const mapDispatchToProps = (dispatch) => {
return {
addTodo: (obj) => dispatch(addTodos(obj)),
};
};
const Todos = (props) => {
const { count, setCount } = props;
const [todo, setTodo] = useState("");
// Contextからログインユーザを取得
const { currentUser } = useContext(AuthContext);
const handleChange = (e) => {
setTodo(e.target.value);
};
const [num, setNum] = useState(100);
const onCountUp = () => {
setCount(count + num);
};
const onCountDown = () => {
setCount(count - num);
};
const add = () => {
if (todo === "") {
alert("Input is Empty");
} else {
props.addTodo({
id: Math.floor(Math.random() * 1000),
item: todo,
completed: false,
balance: 0,
});
setTodo("");
}
};