La propiedad ‘__persistor’ no existe en el tipo ‘Store‘.

Intento unir un almacén persistente redux del lado del cliente, como recomiendan los documentos aquí:

https://github.com/kirill-konshin/next-redux-wrapper

// pages/_app.tsx import React from 'react'; import App from 'next/app'; import {useStore} from 'react-redux'; import {wrapper} from './lib/redux'; import {PersistGate} from 'redux-persist/integration/react'; export default wrapper.withRedux(({Component, pageProps}) => { const store = useStore(); return ( <persistgate persistor="{store.__persistor}" loading=""></persistgate><div>Cargando</div>}> <component {...pageprops}=""></component> ); });

Pero obtengo el siguiente error:

./pages/app.tsx:40:39 Error de tipo: La propiedad '__persistor' no existe en el tipo 'Store<any, anyaction="">'. 38 | <meta name="robots" content="noindex"> 39 | > 40 | <persistgate persistor="{store.__persistor}" loading=""></persistgate><div>Cargando</div>}> | ^ 41 | <component {...pageprops}=""></component> 42 | 43 | <cookiedialog></cookiedialog>

¿Qué está mal? ¿Es un problema de compatibilidad? Tengo estas versiones.

"redux": "^4.1.1", "redux-persist": "^6.0.0", "redux-saga": "^1.1.3",

Tampoco entiendo la próxima parte, ¿por qué necesito esos parámetros en la página? ¿Qué es este método ‘connect’? ¿Realmente lo necesito?

// pages/index.js import React from 'react'; import {connect} from 'react-redux'; export default connect(state => state, {setClientState})(({fromServer, fromClient, setClientState}) => ( <div>

Así es como se asigna ‘__persistor’ en ‘store.ts’.

“`es6
const persistedReducer = persistReducer(persistConfig, combinedReducer);

const store: any = configureStore({
reducer: persistedReducer,
devTools: true,
});

store.__persistor = persistStore(store);

return store;
};
“`

davy.ai

July 31, 2023 at 7:50 pm

El mensaje de error indica que la propiedad __persistor no existe en el tipo Store de react-redux. Para utilizar PersistGate de redux-persist, es mejor utilizar el tipo Store de redux-persist. Puedes importarlo de la siguiente manera:

import { Store } from 'redux';
import { Persistor } from 'redux-persist/es/types';

Luego, puedes actualizar el código para utilizar el tipo Persistor en la propiedad persistor:

import React from 'react';
import App from 'next/app';
import { useStore } from 'react-redux';
import { wrapper } from './lib/redux';
import { PersistGate } from 'redux-persist/integration/react';
import { Store, Persistor } from 'redux-persist/es/types';

export default wrapper.withRedux(({ Component, pageProps }) => {
  const store: Store = useStore();
  const persistor: Persistor = (store as any).__persistor;
  return (
    <persistgate persistor="{persistor}" loading=""></persistgate><div>Loading</div>}>
      <component {...pageprops}=""></component>

  );
});

En cuanto a la segunda pregunta, el método connect de react-redux se utiliza para conectar un componente con la tienda de Redux. Recibe dos argumentos: mapStateToProps y mapDispatchToProps. En el código de ejemplo, connect se utiliza para conectar el componente index.js a la tienda y pasar el creador de acciones setClientState como una prop. Sin embargo, no parece relevante para el problema en cuestión.

Answer

davy.ai

July 31, 2023 at 7:50 pm
El mensaje de error indica que la propiedad __persistor no existe en el tipo Store de react-redux. Para utilizar PersistGate de redux-persist, es mejor utilizar el tipo Store de redux-persist. Puedes importarlo de la siguiente manera:
```
import { Store } from 'redux';
import { Persistor } from 'redux-persist/es/types';
```
Luego, puedes actualizar el código para utilizar el tipo Persistor en la propiedad persistor:
```
import React from 'react';
import App from 'next/app';
import { useStore } from 'react-redux';
import { wrapper } from './lib/redux';
import { PersistGate } from 'redux-persist/integration/react';
import { Store, Persistor } from 'redux-persist/es/types';

export default wrapper.withRedux(({ Component, pageProps }) => {
  const store: Store = useStore();
  const persistor: Persistor = (store as any).__persistor;
  return (
    <persistgate persistor="{persistor}" loading=""></persistgate><div>Loading</div>}>
      <component {...pageprops}=""></component>

  );
});
```
En cuanto a la segunda pregunta, el método connect de react-redux se utiliza para conectar un componente con la tienda de Redux. Recibe dos argumentos: mapStateToProps y mapDispatchToProps. En el código de ejemplo, connect se utiliza para conectar el componente index.js a la tienda y pasar el creador de acciones setClientState como una prop. Sin embargo, no parece relevante para el problema en cuestión.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

La propiedad ‘__persistor’ no existe en el tipo ‘Store‘.

Answer

davy.ai