2
votes

Redux fonctionne en dev, semble interrompre la production

J'ai une application de bureau Electron contenant une application React + Redux. Redux fonctionne bien lors de l'exécution de l'application localement en développement, mais ne met pas à jour les composants une fois que l'application a été construite sur une application de bureau native.

De nombreux articles et problèmes semblent penser que la boutique est mal configurée, que je mute directement l'état plutôt que de le mettre à jour, ou que ma fonction mapStateToProps n'est pas configurée correctement.

Je ne vois pas comment l'un de ces problèmes peut être un problème, car mon application fonctionne pendant le développement, et je peux voir le magasin être mis à jour et le composant ré-rendu.

En production, cependant, ce qui suit se produit:

L'état du magasin est initialisé
Une action est envoyée
Les mises à jour de l'état (je peux voir dans les outils de développement)
Aucun de mes composants connectés n'a été rendu à nouveau avec des accessoires mis à jour.

La seule différence que je peux voir entre le développement et la production est que dans Electron, pendant le développement, l'application est chargée via http: // localhost , et pendant la production, elle est chargée via file: ///

Ma boutique est configurée comme:

componentDidMount() {
    this.props.getProducts();
}

La boutique est fournie comme:

XXX

Je connecte mon composant au magasin en tant que:

const mapStateToProps = (state: RootState) => {
    return {
        hasLoaded: state.products.hasLoaded,
        products: state.products.products
    };
};

const mapDispatchToProps = {
    getProducts: getProducts
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ProductsList);

Ensuite, j'appelle getProducts depuis le composant comme:

<Provider store={store}>
    <App />
</Provider>

Je m'attends à ce que l'état soit mis à jour avec les produits récupérés, puis le composant doit être rendu avec l'état du magasin mis à jour comme accessoires.

Au lieu de cela, l'état du magasin est mis à jour - comme je peux le voir dans Redux DevTools - mais le composant connecté ne rend, et componentDidUpdate n'est pas appelé.

reactjs typescript webpack electron redux

0 commentaires

3 Réponses :

0
votes

Pouvez-vous simplement essayer de supprimer composeWithDevTools?

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

L'exemple ci-dessous utilise le magasin d'applications React. Cela ne fonctionne pas non plus avec les outils de développement Redux.

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

J'ai supprimé cette partie avant la version de production car elle nécessitait un plugin de développement de navigateur; J'espère que React Native sera le même.

export const store = createStore(rootReducer, applyMiddleware(thunk));

1 commentaires

J'ai supprimé l'extension redux devtools avant et j'utilise simplement compose de redux, mais malheureusement cela n'a eu aucun effet.

0
votes

J'ai passé plusieurs jours avec le même sentiment et le même problème que vous. Après avoir détecté qu'en production, la fonction d'abonnement de redux fonctionnait toujours, mais react-redux n'a pas pu se connecter correctement, j'ai essayé de rétrograder et cela a fonctionné.

3 commentaires

J'ai suggéré que ce serait un bogue, et que la rétrogradation a résolu un problème similaire. Je ne pense pas que cela "n'apporte pas de réponse".

Ensuite, vous devez modifier votre réponse de manière appropriée, en supprimant les questions.

@lacavazan, vers quelle version de react-redux avez-vous rétrogradé?

0
votes

L'ajout de ce qui suit à electron-webpack.config.json a résolu le problème, react-redux doit être ajouté à la liste blanche.

{
    "whiteListedModules": ["react-redux"]
}

0 commentaires