For beginners of redux, I want to see my newly added data after clicking the Add Todo button. How to implement it?

I send dispatch, in the AddTodo.js file

import React from "react"
import { connect } from "react-redux"
import { addToCart } from "../actions/cart-actions"

let AddTodo = ({ dispatch }) => {
    let input

    return (
        <div>
            <form
                onSubmit={e => {
                    e.preventDefault()
                    if (!input.value.trim()) {
                        return
                    }
                    dispatch(addToCart("Coffee 500gm", 1, 250))
                    input.value = ""
                }}
            >
                <input
                    ref={node => {
                        input = node
                    }}
                />
                <button type="submit">
                    Add Todo
                </button>
            </form>
        </div>
    )
}
AddTodo = connect()(AddTodo)

export default AddTodo

I want to display my new state data on the page. How can I do that?

how do I know if the data in state is updated?

Click here is the code address


redux manages the global state .
so you just need to update the global state .
connect higher-order functions provide a dispatch method. Using dispatch a action , you will automatically reducer a state . So state is updated. The data of
state is passed into the component through the connect function, which can be obtained through props in the component.

Menu