React Todo with Firebase moving actions to redux

Viewed 56

I am using react +redux+typescript+firebase for a simple todo application. How to move all actions from components to store if i use react hooks(without other third party libraries, if it is possible). Components/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',
         payload: todo,
     }
}

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

I started describing the actions, but I don't know exactly what to write in the context of the store.

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;
    ...

I will also be grateful if you can indicate with a couple of examples (instead of any) which types I should use, since I'm still new to typescript

0 Answers
Related