react redux stan

Question

Czy jest to zgodne z dobrymi praktykami jeżeli do całego projektu używam reduxa a jednym komponencie używam useState? używam go lokalnie, na potrzebę tylko tego jednego komponentu w którym się znajduje...

proszę o radę

Comments

Z jakiego powodu dla jednego komponentu używasz innej metody obsługi stanu niż dla całego projektu?

---

Mam taki kod, którego zadaniem jest stworzenie obiektu który dodam do reducera jako nowy task, spójrz na ten kod najpierw bez datepickera, robił on całą robotę bez useState ale na potrzebę datepickera dodałem useState, wiec się zastanawiam czy nie było by prościej stworzyć cały obiekt newTask za pomocą useState a potem dodać go jako nowy obiekt-task do głównego stanu....

import React, { useState } from 'react'
import { connect } from 'react-redux'
import DatePicker from "react-datepicker"
import "react-datepicker/dist/react-datepicker.css";

function Add(props) {
    console.log(props);
    const [startDate, setStartDate] = useState(new Date());
    let newTask = {
        title: null,
        titleMarked: false,
        id: null,
        date: startDate,
        detail: [
            { point: null, pointMarked: false },
            { point: null, pointMarked: false },
            { point: null, pointMarked: false }
        ]
    }

    console.log(newTask);
    const handleChange = (e) => {
        if (e.target.id === 'newTask') {
            newTask.title = e.target.value
            console.log(e.target.value);
            console.log(newTask.title);
        } if (e.target.id === 'pointOne') {
            newTask.detail[0] = { point: e.target.value, pointMarked: false }
            console.log(e.target.value);
            console.log(newTask.detail);
        } if (e.target.id === 'pointTwo') {
            newTask.detail[1] = { point: e.target.value, pointMarked: false }
        } if (e.target.id === 'pointThree') {
            newTask.detail[2] = { point: e.target.value, pointMarked: false }

        }
        newTask.id = new Date().getTime()

    }
    console.log(newTask);
    const handleSubmit = (e, id) => {
        e.preventDefault()
        props.addNewTask(newTask)
        console.log(newTask.id);
        props.displayDetail(newTask.id)
        props.display('task')

    }
    const handleDate = (date) => {
        // console.log(date.toLocalString())
        // setStartDate(date)
        props.addSetDate(date)
        return date
    }
    return (
        <>
            <form onSubmit={handleSubmit} type='submit'>
                <input onChange={handleChange} id='newTask' type="text" />
                <label htmlFor="text">new task</label>
                <input onChange={handleChange} placeholder='optional' id='pointOne' type="text" />
                <label htmlFor="text">point one</label>
                <input onChange={handleChange} placeholder='optional' id='pointTwo' type="text" />
                <label htmlFor="text">point two</label>
                <input onChange={handleChange} placeholder='optional' id='pointThree' type="text" />
                <label htmlFor="text">point three</label>
                <DatePicker
                    selected={startDate}
                    onChange={date => setStartDate(date)}
                    timeInputLabel="Time:"
                    dateFormat="MM/dd/yyyy h:mm aa"
                    showTimeInput
                    placeholderText="Click to select a date"
                />
                <button>ADD</button>
            </form >
        </>
    )
}
const mapStateToProps = (addNewTask) => {

    return {
        add: addNewTask
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        addNewTask: (newTask) => { dispatch({ type: 'ADD_NEW_TASK', newTask: newTask }) },
        displayDetail: (id) => { dispatch({ type: 'DISPLAY_DETAIL', id: id }) },
        display: (id) => { dispatch({ type: 'DISPLAY', id: id }) }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Add)

 

---

Jak znasz hooki nie używaj connect z reduxa :)

 

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import DatePicker from "react-datepicker"
import "react-datepicker/dist/react-datepicker.css";
 
export default function Add() {
    const dispatch = useDispatch();
    const [startDate, setStartDate] = useState(new Date());
    let newTask = {
        title: null,
        titleMarked: false,
        id: null,
        date: startDate,
        detail: [
            { point: null, pointMarked: false },
            { point: null, pointMarked: false },
            { point: null, pointMarked: false }
        ]
    }
 
    console.log(newTask);
    const handleChange = (e) => {
        if (e.target.id === 'newTask') {
            newTask.title = e.target.value
            console.log(e.target.value);
            console.log(newTask.title);
        } if (e.target.id === 'pointOne') {
            newTask.detail[0] = { point: e.target.value, pointMarked: false }
            console.log(e.target.value);
            console.log(newTask.detail);
        } if (e.target.id === 'pointTwo') {
            newTask.detail[1] = { point: e.target.value, pointMarked: false }
        } if (e.target.id === 'pointThree') {
            newTask.detail[2] = { point: e.target.value, pointMarked: false }
 
        }
        newTask.id = new Date().getTime()
 
    }
    console.log(newTask);
    const handleSubmit = (e, id) => {
        e.preventDefault()
        dispatch({ type: 'ADD_NEW_TASK', newTask: newTask }) 
        dispatch({ type: 'DISPLAY_DETAIL', id: newTask.id })
        dispatch({ type: 'DISPLAY', id: 'task' })
 
    }
    const handleDate = (date) => {
        // console.log(date.toLocalString())
        // setStartDate(date)
        props.addSetDate(date)
        return date
    }
    return (
        <>
            <form onSubmit={handleSubmit} type='submit'>
                <input onChange={handleChange} id='newTask' type="text" />
                <label htmlFor="text">new task</label>
                <input onChange={handleChange} placeholder='optional' id='pointOne' type="text" />
                <label htmlFor="text">point one</label>
                <input onChange={handleChange} placeholder='optional' id='pointTwo' type="text" />
                <label htmlFor="text">point two</label>
                <input onChange={handleChange} placeholder='optional' id='pointThree' type="text" />
                <label htmlFor="text">point three</label>
                <DatePicker
                    selected={startDate}
                    onChange={date => setStartDate(date)}
                    timeInputLabel="Time:"
                    dateFormat="MM/dd/yyyy h:mm aa"
                    showTimeInput
                    placeholderText="Click to select a date"
                />
                <button>ADD</button>
            </form >
        </>
    )
}

 

Answer 1

Redux jest do przechowywania globalnego stanu aplikacji. Jeśli coś występuje tylko w jednym miejscu to na pewno powinno się użyć useState :) Nie warto dawać wszystkiego do redux.

Comments

dzięki