Как реализовать редактирование объекта на Redux?

Question

[batonpeton]

Помогите пожалуйста, уже неделю ломаю голову!

Есть форма с двумя инпутами, данные с формы сохраняются в объекте, передаются в reducer.
Как должно все работать:
При нажатии на кнопку редактирования, данные из объекта отображаются в форме от туда их можно редактировать, по нажатию на кнопку сохранить - данные в объекте обновляются.
Как сейчас работает
Вместо редактирования объектасоздается новый объект;(
ниже хэндлер который сохраняет данные с формы и передает их в reducer

const submitHandler = (event:FormEvent<HTMLFormElement>) =>{
        event.preventDefault();
        dispatch({type:'product/ProductAdd',payload:{
            id:inputValue.id === '' ? nanoid() : inputValue.id,
            name:inputValue.name,
            price:inputValue.price,
        }}
        setInputValue(initialState);
        setCancel(false)
    }

Функция редактирования

const onClickEdit = (id: string) =>{
        
        product.forEach((elem: { id: string; name: string; price: string; }) => {
            if(id === elem.id){
                dispatch({type:'product/ProductEdit',payload:{
                    id:elem.id,
                    name:elem.name,
                    price:elem.price 
                }})
            }
            if(id === elem.id){
                setInputValue({   
                    id:elem.id,
                    name:elem.name,
                    price:elem.price    
                })
            }
            return elem    
        });
        setCancel(true);
    }

Вот reducer:

case 'product/ProductEdit':

            return {
                ...state,
                product:  state.product.map(elem => elem.id === action.payload.id ?
                    Object.assign({}, elem, action.payload) : elem )
            };

Comments

[batonpeton]

Извиняюсь не добавил сюда функцию редактирования

const onClickEdit = (id: string) =>{
        
        product.forEach((elem: { id: string; name: string; price: string; }) => {
            if(id === elem.id){
                dispatch({type:'product/ProductEdit',payload:{
                    id:elem.id,
                    name:elem.name,
                    price:elem.price 
                }})
            }
            if(id === elem.id){
                setInputValue({   
                    id:elem.id,
                    name:elem.name,
                    price:elem.price    
                })
            }
            return elem    
        });
        setCancel(true);
    }

[Алексей Уколов]

Покажите уже весь код компонента и редьюсера, бесполезно гадать по разрозненным кускам.

[batonpeton]

Компонент формы

const Form = () =>{

    const initialState = {
        id:'',
        name:'',
        price:''
    }

    const product = useSelector((store)=>store.productAdd.product);
    const dispatch = useDispatch();
    const [inputValue,setInputValue] = useState<FormInterface>(initialState);
    const [cancel, setCancel] = useState<boolean>(false);
    const [searchProduct,setSearchProduct] = useState('');

    const changeHandler = (event:ChangeEvent<HTMLInputElement>) =>{
        const newInput = (data:FormInterface) => ({...data, [event.target.name]: event.target.value});
        setInputValue(newInput);
    }
    
    const submitHandler = (event:FormEvent<HTMLFormElement>) =>{
        event.preventDefault();
        dispatch({type:'product/ProductAdd',payload:{
            id:inputValue.id === '' ? nanoid() : inputValue.id,
            name:inputValue.name,
            price:inputValue.price,
        }})
        setInputValue(initialState);
        setCancel(false)
    }

    const filterProduct = (event: string) =>{
        dispatch({type:'product/ProductFilter',payload:event})
    }

    useEffect(()=>{
        const debounce = setTimeout(()=>{
            filterProduct(searchProduct)
        },500)
        return ()=> clearTimeout(debounce)
    },[searchProduct])


    const onClickReset = () =>{
        setInputValue({
            name:'',
            price:''
        })
        setCancel(false)
    }

    const onClickEdit = (id: string) =>{

        const selectedProduct = product.find((elem: { id: string }) => elem.id === id);
        if(selectedProduct){

            dispatch({type:'product/ProductEdit',payload:{
                id:selectedProduct.id,
                name:selectedProduct.name,
                price:selectedProduct.price 
            }})
        }
        setInputValue({   
            id:selectedProduct.id,
            name:selectedProduct.name,
            price:selectedProduct.price    
        })
        setCancel(true);
    }
    
    return (
        <>
             <form onSubmit={(event)=>submitHandler(event)}>
                <div className="input_wrap input_name">
                    <span className="name">Название товара:</span>
                    <input name="name" value={inputValue.name} onChange={(event)=>changeHandler(event)} type="text" />
                </div>
                <div className="input_wrap input_price">                    
                    <span className="price">Стоимость товара:</span>
                    <input name="price" value={inputValue.price} onChange={(event)=>changeHandler(event)} type="text" />
                </div>
                <div className="input_wrap input_search">
                    <span className="search">Поиск:</span>
                    <input name="search" type="text" onChange={(e)=>setSearchProduct(e.target.value)}/>
                </div>
                <input type="submit" value={cancel === false?'Submit':'Save!'}/>
                {cancel === true ? <Cancel onClickReset={onClickReset}/> : false}
            </form>
            <Output
                cancel={cancel}
                onClickEdit={onClickEdit} 
            />
        </>
    )
}

Компонент вывода формы

const Output = (props) => {
    const product = useSelector((store)=> store.productAdd.product);
    const filtredProd = useSelector((store)=>store.productAdd.filtredProduct)
    if(filtredProd.length > 0){
        return (
            <div>
                {filtredProd.map((elem, index)=>{
                return(
                    <div key={index} className="product_wrapper">
                    <div className="name">{elem.name}</div>
                    <div className="price">{elem.price}</div>
                    <Remove id={elem.id} cancel={props.cancel}/>
                    <button className="edit" onClick={()=>props.onClickEdit(elem.id)}>Edit</button>
                    </div>
                )
            })}
            </div>
        )
    } else {
        return ( 
            <div>
                {product.map((elem, index)=>{
                    return(
                        <div key={index} className="product_wrapper">
                        <div className="name">{elem.name}</div>
                        <div className="price">{elem.price}</div>
                        <Remove id={elem.id} cancel={props.cancel}/>
                        <button className="edit" onClick={()=>props.onClickEdit(elem.id)}>Edit</button>
                        </div>
                    )
                })}
    
            </div> 
        );
    }
}

Редьюсер

const initialState = {
    product:[],
    selected:undefined,
    filtredProduct:[]
}

const productReducer = (state = initialState, action) =>{
    switch(action.type){  
        case 'product/ProductAdd':
            return {
                ...state,
                product:[...state.product,action.payload]
            }
        case 'product/ProductRemove':
            return {
                ...state,
                product:state.product.filter(elem => elem.id != action.payload),
            }
        case 'product/ProductEdit':
            return {
                ...state,
                product: state.product.map(elem => elem.id === action.payload.id ?
                    Object.assign({}, elem, action.payload) : elem )
            };
        case 'product/ProductFilter':
            return {
                ...state,
                filtredProduct:state.product.filter((elem)=> {
                    return action.payload.toLowerCase() === '' ? elem : elem.name.toLowerCase().includes(action.payload.toLowerCase())
                })
            }    
        default:
            return state
    }
}

Answer 1

[Алексей Уколов]

Код, вроде, выглядит рабочим. Так что подозреваю, что дело всё же в неправильном типе экшена:

dispatch({type:'product/ProductAdd'

case 'product/ProductEdit':

Если же это вы сюда скопировали как-то криво и тип экшена совпадает, то нужно смотреть что в inputValue.id в момент диспатча. Может, значение не заполняется, а может там идёт конвертация числа в строку, например, и строгое сравнение в редьюсере не проходит.

Comments

[batonpeton]

Да я, забыл добавить саму функцию редактирования, посмотрите пожалуйста

const onClickEdit = (id: string) =>{
        
        product.forEach((elem: { id: string; name: string; price: string; }) => {
            if(id === elem.id){
                dispatch({type:'product/ProductEdit',payload:{
                    id:elem.id,
                    name:elem.name,
                    price:elem.price 
                }})
            }
            if(id === elem.id){
                setInputValue({   
                    id:elem.id,
                    name:elem.name,
                    price:elem.price    
                })
            }
            return elem    
        });
        setCancel(true);
    }

[Алексей Уколов]

Зачем вы при открытии формы редактирования сразу диспатчите событие ProductEdit? Ещё никто ничего не изменил, в нём старые данные. Диспатчить его нужно при сохранении формы, там, где вы сейчас безусловно диспатчите ProductAdd, как я и предполагал.

const submitHandler = (event:FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    
    let type = 'product/ProductAdd';
    let payload = {
        id:nanoid(),
        name:inputValue.name,
        price:inputValue.price,
    };
    
    if (inputValue.id) {
        type = 'product/ProductEdit';
        payload.id = inputValue.id;
    }
    
    dispatch({type, payload})
    setInputValue(initialState);
    setCancel(false);
}

...

const onClickEdit = (id: string) => {
    const selectedProduct = product.find((elem: { id: string }) => elem.id === id);

    setInputValue({
        id:selectedProduct.id,
        name:selectedProduct.name,
        price:selectedProduct.price,
    });
    setCancel(true);
}

[batonpeton]

Алексей Уколов, Спасибо вам огромное, великий мудрец!!!!!!!!