使用Firebase将动作移动到Redux来响应Todo

如何解决使用Firebase将动作移动到Redux来响应Todo

我正在将react + redux + typescript + firebase用于一个简单的todo应用程序。如果我使用react钩子（如果可能的话，没有其他第三方库）如何将所有动作从组件移动到存储中。 组件/Todo.tsx：

import React from 'react';
import {connect} from 'react-redux';
import Switch from '@material-ui/core/Switch';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import "./Todo.scss";
import {todosRef} from "../../firebase/firebase";

const Todo = (props: any) => {
    const classes = [''];
    const { todo } = props;
    const updateTodo = () => {
        todosRef.child(todo.id).set({...todo,done:!todo.done})
    }
    if (todo.done) {
        classes.push('_completed');
    }
    return (
        <div className="Todo">
            <Switch
                edge="end" checked={todo.done} onChange={updateTodo}
                inputProps={{ "aria-labelledby": "switch-list-label-bluetooth" }}
            />
            <p className={classes.join(' ')}>{todo.task}</p>
            <IconButton aria-label="delete" onClick={e => todosRef.child(todo.id).remove()}>
                <DeleteIcon fontSize="large" />
            </IconButton>
        </div>
    );
}
export default connect()(Todo);

components / TodoForm.tsx

import React,{ useState } from "react";
import TextField from '@material-ui/core/TextField';
import {todosRef} from "../../firebase/firebase";

const TodoForm:React.FC = () => {
    const [title,setTitle] = useState<string>("");
    const createTodo = (e: React.FormEvent<EventTarget>) => {
        e.preventDefault();
        const item = {
            task: title,done: false,};
        todosRef.push(item);
        setTitle("");
    };
    return (
        <form onSubmit={createTodo}>
            <TextField
                style={{ width: "100%" }}
                id="outlined-basic"
                value={title}
                onChange={(e:React.ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
                label="Write task"
                variant="outlined"
            />
        </form>
    );
}
export default TodoForm;

components / TodoList.tsx：

import React,{useState,useEffect} from "react";
import Todo from "../Todo/Todo";
import Divider from '@material-ui/core/Divider';
import {todosRef} from "../../firebase/firebase";

const TodoList:React.FC = () => {
    const [todos,setTodos]  = useState<any>([]);
    useEffect(() => {
        todosRef.on('value',(snapshot) => {
            let items = snapshot.val();
            let newState = [];
            for (let item in items) {
                newState.push({
                    id: item,task: items[item].task,done: items[item].done
                });
            }
            setTodos(newState)
        });
    },[])
    return (
        <>
            {todos.map((todo: any,i: number) => (
                <React.Fragment key={todo.id}>
                    <Todo  todo={todo} />
                    {i<todos.length -1 && <Divider />}
                </React.Fragment>
            ))}
        </>
    );
}
export default TodoList;

actions / index.ts：

export const fetchTodos = (todo:any) => {
    return {
        type: 'FETCH_TODOS',payload: todo,}
}
export const addToDo = (setTodos:any) => {
    return {
        type: 'ADD_TODO',payload: setTodos,}
}

export const updateTodo = (todo:any) => {
     return {
         type: 'UPDATE_TODO',}
}

export const removeTodo = (todo:any) => {
    return {
        type: 'REMOVE_TODO',}
}

我开始描述这些动作，但是我不知道该在商店的上下文中写什么。

const initialState = {
    todos: [],setTodos: [],}
export default (state = initialState,action:any) => {
    switch (action.type) {
        case FETCH_TODOS:
            return {
                ...state,todo:action.payload
            };
        case REMOVE_TODO:
                ...
        default:
            return state;
    ...

如果您能用几个示例（而不是任何示例）指出我应该使用哪种类型，我也将不胜感激，因为我仍然不熟悉打字稿