Redux toolkit Redux Stores hot reloading can not replace reducers on React Native

128 Views Asked by At

I tried to implement redux hot reload on my react native app. as I can see when I update the reducers the store.replaceReducer is called but the reducer function's change isnt applied . I have to reload the app to apply the changes.

import {configureStore} from '@reduxjs/toolkit';
import {rootReducers} from './reducers';


export default function configureAppStore(initialState: any) {
  const fetchMiddlewareInstance = fetchMiddleware(baseUrl);

  const store = configureStore({
    preloadedState: initialState,
    reducer: rootReducers,
  });

  // webpack MHR redux hot reload
  // @ts-ignore
  if (module.hot) {
    // @ts-ignore
    module.hot.accept(() => {
      console.log('11111  hot module change at cconfig.js');
      store.replaceReducer(rootReducers); 
    });
  }

  return store;
}
export const store = configureAppStore({});

I also tryied the instruction from https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading#redux-stores

if (module.hot) {
    module.hot.accept(() => {
      const nextRootReducer = require('../reducers/index').default;
      store.replaceReducer(nextRootReducer);
    });
  }

but the reducers changes didnt apply on hot reload. still need to reload the whole app.

But HMR did work on my react app. it just didnt work on my react native

Is there any instruction about how to use redux HMR in React native?

0

There are 0 best solutions below