reactjs - Redux fungerar i utveckling, verkar gå sönder i produktion


Jag har en Electron-skrivbordsapplikation som innehåller en React + Redux-app. Redux fungerar bra när appen körs lokalt i utveckling, men uppdaterar inte komponenter när appen har byggts till en inhemsk skrivbordsapp.

Många artiklar och problem verkar tro att butiken är felkonfigurerad, eller att jag ändrar tillståndet direkt istället för att uppdatera det, eller att min mapStateToProps-funktion inte är korrekt inställd.

Jag kan inte se hur någon av dessa kan vara ett problem, eftersom min app fungerar under utveckling, och jag kan se att butiken uppdateras och komponenten renderas om.

I produktion händer dock följande:

  • Butikens tillstånd är initialiserat
  • En åtgärd skickas
  • Statens uppdateringar (jag kan se i utvecklarverktygen)
  • Inga av mina anslutna komponenter renderas om med uppdaterade props.

Den enda skillnaden jag kan se mellan utveckling och produktion är att inom Electron, under utveckling laddas appen via http://localhost, och under produktion laddas den via file:///

Min butik är konfigurerad som:

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

Butiken tillhandahålls som:

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

Jag kopplar min komponent till lagret på följande sätt:

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

const mapDispatchToProps = {
    getProducts: getProducts
};

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

Sedan anropa getProducts inifrån komponenten som:

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

Jag förväntar mig att tillståndet uppdateras med de hämtade produkterna, och sedan bör komponenten renderas om med det uppdaterade tillståndet i butiken som props.

Istället uppdateras butikstillståndet - som jag kan se det i Redux DevTools - men den anslutna komponenten renderas aldrig om, och componentDidUpdate anropas aldrig heller.

Svar #1

Jag tillbringade många dagar med samma känsla och problem som du gjorde. Efter att ha upptäckt att subscribe-funktionen från redux fortfarande fungerade i produktion, men react-redux inte kunde ansluta ordentligt, försökte jag nedgradera och det fungerade.

Svar #2

Kan du försöka bara ta bort composeWithDevTools?

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

Exemplet nedan använder React-applikationslagret. Det fungerar inte heller med Redux devtools.

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

Jag tog bort den här delen innan produktionsbygget eftersom det krävde ett webbläsartillägg för utvecklare; jag hoppas att React Native kommer att vara likadant.

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()