I wanted to know if I can somehow modify my code so to use only Redux in my App - it's about editing the item. I don't know how to do it without doing my state which determines if the edit form shows or not, I also don't know if I can somehow else provide the clicked item instead of doing setChosenItem.
Is it possible to do in clean Redux?
import { connect } from "react-redux";
import {useEffect, useState} from "react";
import {editTodo} from "../actions/TodoActions"
import {Field, Form, Formik} from "formik";
import {v4 as uuidv4} from "uuid";
const TodoList = ({todos,editTodo}) => {
const [shouldEdit,setShouldEdit] = useState(false)
const [chosenItem,setChosenItem] = useState({})
useEffect(() => {
console.log(chosenItem)
})
return (
<div>
{shouldEdit && (
<div>
<h3>Todo edit: </h3>
<Formik
initialValues={{
id: chosenItem.id,
name: chosenItem.name,
date: chosenItem.date,
done: chosenItem.done
}}
onSubmit={(values) => {editTodo(values); setShouldEdit(!shouldEdit)}}
enableReinitialize={true}>
<Form>
<Field name="name" />
<Field name="date" />
<button type="submit">
Zatwierdz
</button>
</Form>
</Formik>
</div>
)}
{todos.map(todo => (<div>{todo.name} <button onClick={() => {setShouldEdit(!shouldEdit);setChosenItem(todo)}}>Edit</button></div>))}
</div>
)
}
const mapStateToProps = (state) => {
console.log(state)
return {
todos: state.todos
};
}
const mapDispatchToProps = {
editTodo
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);