redux/reducer.js 内のファイルに、firestoreを接続するコードをどのファイルに書いたら良いか確認したい。
Q&A
Closed
解決したいこと
開発環境
OS CentOS Monterey(12.0.1)
node(14.16.1)
npm(6.14.12)
material-ui(5.3.1)
firebase (9.6.5)
firestore
react-router-dom(6.2.1)
redux-toolkit
上記の環境で、送金アプリを作成しています。
下記の参考サイトを見ながら、
CloudFirestoreに、コレクション(addTodo=受金者)フィールド(item, balance, completed)を作成しました。
受金者のユーザ情報を取得するコードを書き、接続したいのですが、下記のサイトの見て、ソースコードを書いたのですが、どのファイルに書いたら良いかわかりません。
どなたかアドバイスをお願いします。
参考サイト
[firestoreとreduxのバインディングライブラリ「react-redux-firebase」の使い方]
(https://tech.frenps.co.jp/archives/561)
redux/reducer.js
import { createSlice } from "@reduxjs/toolkit";
※ 参考サイトを見て書いたソースコード
const firestore = useFirestore()
const add = () => {
return firestore.add("addTodo", {
idCount: 1,
item: todo,
completed: false,
balance: 0,
});
useFirestoreConnect({
collection: "addTodo",
where: [["todo", "false", "0"]],
);
const initialState = {
todos: [],
};
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),
};
},
//todoを更新
updateTodos: (state, action) => {
return {
...state,
todos: state?.todos?.map((todo) => {
if (todo.id === action.payload.id) {
return {
...todo,
balance: action.payload.balance,
};
}
return todo;
}),
};
},
},
});
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 firestore = useFirestore();
const add = () => {
return firestore.add("addTodo", {
idCount: 1,
item: todo,
completed: false,
balance: 0,
});
useFirestoreConnect({
collection: "addTodo",
where: [[""todo", "false", "0"]],
});
if (todo === "") {
alert("Input is Empty");
} else {
props.addTodo({
id: Math.floor(Math.random() * 1000),
item: todo,
completed: false,
balance: 0,
});
setTodo("");
}
};
return (
<>
<div style={{ textAlign: "center" }}>
<div className="balance-list">
<h2>
{currentUser?.displayName ?? "未ログイン"}
さんの残高 : {count} 円{" "}
</h2>
<Box
component="form"
sx={{
"& > :not(style)": { m: 1, width: "25ch" },
}}
noValidate
autoComplete="off"
>
<TextField
label="入出金額"
variant="outlined"
value={num}
onChange={(e) => setNum(Number(e.target.value))}
/>
</Box>
<Button onClick={onCountUp} variant="outlined" color="primary">
Increment
</Button>
<Button onClick={onCountDown} variant="outlined" color="secondary">
Decrement
</Button>
</div>
<div className="addTodos">
<h2>受取人一覧</h2>
<Box
component="form"
sx={{
"& > :not(style)": { m: 1, width: "25ch" },
}}
noValidate
autoComplete="off"
>
<TextField
id="outlined-basic"
label="受取人を入力してください"
variant="outlined"
type="text"
onChange={(e) => handleChange(e)}
className="todo-input"
value={todo}
/>
</Box>
<Button
variant="outlined"
color="primary"
className="add-btn"
onClick={() => add()}
>
受取人追加
</Button>
<br />
<h2>受取人名</h2>
</div>{" "}
</div>
</>
);
};
export default connect(mapStateToProps, mapDispatchToProps)(Todos);
0