Как подключиться через ftp к удаленному серверу?

Моя невнимательность, я прокидывал не тот порт, спасибо вам!

Как подключиться через ftp к удаленному серверу?

спасибо, что наводите) прокидывал через настройки роутера 80 порт, установлен vsftpd, подключался через filezilla, с помощью пассивного режима

Как перезаписать стиль компонента, при передаче нового стиля через props?

Спасибо!!

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

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

Как изменять вложенные свойства в redux?

PlasterTom, Привет, а что ты подредактировал сижу туплю с таской уже неделю?

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

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

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
    }
}

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

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

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);
    }

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

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

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);
    }