Is it possible to create a handleChange for a form that takes the values of a Redux store?

Asked

Viewed 31 times

0

Next, I’m creating an app and came across this problem: I have a store set and want to create a data update form in Atlas (Mongodb). But I want this form, already come with the values that are in the store. So far so good... Now my question is: How to create a handleChange for this situation? Since only access the data in this case is not enough...

**NOTE: The data is something like:

(5) [{…}, {…}, {…}, {…}, {…}]

0: {date: {…}, _id: "5d66d1ffaafb603850a450be", value: 359, category: "Mercado", author: "5d66bb426d80e62f54d02724", …}

1: {date: {…}, _id: "5d66d5f9aad2665674d2be1f", value: 359, category: "Cartão", author: "5d66bb426d80e62f54d02724", …}

2: {date: {…}, _id: "5d6aafa4b89a1d11a08f1890", value: 4500, category: "Salário", author: "5d66bb426d80e62f54d02724", …}

3: {date: {…}, _id: "5d6ab44bb89a1d11a08f1893", value: 112, category: "Salário", author: "5d66bb426d80e62f54d02724", …}

4: {date: {…}, _id: "5d6ab458b89a1d11a08f1894", value: 1000, category: "Salário", author: "5d66bb426d80e62f54d02724", …}

length: 5__proto__: Array(0)

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Actions from '../../redux/actions'
// import useForm from '../../useHooks/useForm'

const Crud = ({title}) => {

    const wallet = useSelector(state => state.wallet)
    const dispatch = useDispatch()

    let data = []

    let patch = ''
    let deleteItem = ''

    if(title === "Entradas") {
        data = wallet.entrys.all
        patch = (id) => {
            dispatch(Actions.entryUpdReq(id))
        }
        deleteItem = (id) => {
            dispatch(Actions.delEntryReq(id))
        }
    } else if(title === "Despesas") {
        data = wallet.outs.all
        patch = (id) => {
            dispatch(Actions.outUpdReq(id))
        }

        deleteItem = (id) => {
            dispatch(Actions.delOutReq(id))
        }
    }

    return (
        <div className="crud">

            <table>
                <tr>
                    <th valign="center">Valor</th>
                    <th>Categoria</th>
                    <th>Data</th>
                    <th>Opções</th>
                </tr>
                {!wallet.loading && wallet.entrys.all && wallet.outs.all && data.length >=1 ?
                <>
                    {data.map(item => {
                        return (
                            <tr>
                                <td><input  value={item.value} /></td>
                                <td><input value={item.category} /></td>
                                <td>{`${item.date.day} de ${item.date.month}`}</td>
                                <td className="btn-opts">
                                    <button onClick={() => deleteItem(item._id)}>Deletar</button>
                                    <button onClick={() => patch(item._id)}>Salvar</button>
                                </td>
                            </tr>
                        )
                    })}
                </> :
                <p>Carregando...</p>
                }
            </table>

        </div>
    )
}

export default Crud
  • You speak Gabe, beauty? Let me try to understand: Do you want to make an onChange to change the value that is already in the Redux store? From what I saw in your code, you take the data, put it in the input and let the user change the data, check?

  • That’s right, I’ve actually been able to sort it out... pretty rough, you know, when you can’t think of anything? That was the moment, I spent a few minutes watching some videos watching nothing on youtube and I got, I created a state with the value of the store, so I can change it only in the component without interfering in anything... But Carlos, thank you so much! <3

  • Tranquil Gabe. I believe this approach there is better and consumes less resource. Success for you.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.