Código

Aplicación.tsx

 function App(){ return( <> <Slider products={products} />. // Error </> } export default App;

Control deslizante.tsx

 import { useSelector, connect } from "react-redux"; import { ProductType, ProductItem, StateType } from "types"; const Slider = ({ products, number }: any) => { // const number = useSelector((state: StateType) => state.number); return ( <S.Slider> <S.SliderWrapper widthSize={number}> {products} ... <S.SliderWrapper> </S.Slider> ); }; export default connect((state: any) => { console.log(state.number); return { number: state.number }; }, null)(Slider);

tipo.ts

 export interface ProductItem { id: number; title: string; price: number; bgcolor: string; colors: { code: string; img: any }[]; } export interface ProductType { products: ProductItem[]; }

Actualmente, Slider Component está usando useSelector, pero ocurre un error al intentar cambiarlo para conectarse. Entonces, ¿cómo debo cambiar la parte de conexión y cómo debo modificar el parámetro y el tipo del componente deslizante?

Mensaje de error

TS2322: escriba '{ productos: { id: número; título: cadena; precio: número; bgcolor: cadena; colores: { código: cadena; imagen: cualquiera; }[]; }[]; }' no se puede asignar al tipo 'IntrinsicAttributes & Omit<any, string | número | símbolo>'. La propiedad 'productos' no existe en el tipo 'IntrinsicAttributes & Omit<any, string | número | símbolo>'.

Solución

Control deslizante.tsx

 const Slider = ({ number, products }: any) => { ... ... } export default connect((state: StateType, { products }: ProductType) => { return { number: state.number, products }; }, null)(Slider);