Menu
I'm having a tough time getting my reducers to be hot swapable.
I'm using Webpack and react-transform-hmr. With this, all of the CSS and the components are hot loaded when I save, but when I try and work on another type of type - most notably the reducers - it would tell me to do a full refresh.
I figured out that this is because I need to explicitly re-load the reducers in and accept the event. Which I'm doing with this code in my store.js:
if(module.hot) {
module.hot.accept('./reducers/', () => {
const nextRootReducer = require('./reducers/index');
store.replaceReducer(nextRootReducer);
});
}
reducers/index exports the root reducer.
However now when I run this it still tells me [HMR] Cannot check for update (Full reload needed and also errors saying [HMR] TypeError: currentReducer is not a function
So - I need some help getting this to work. The code is available at https://github.com/wesbos/Simple-Redux and you can reproduce it by doing:
npm installnpm startposts.js and change the number on line 6 to anything else
882
Using extraReducers In Redux Toolkit extraReducers are a way to listen to actions across all slices - meaning we can call an action in one place and have it update data everywhere!
A function that accepts an initial state, an object of reducer functions, and a "slice name", and automatically generates action creators and action types that correspond to the reducers and state. This API is the standard approach for writing Redux logic.
A friendly abstraction over the standard Redux createStore function that adds good defaults to the store setup for a better development experience.
While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state. This lesson shows you how to pass an action payload along with your action type to update the state.
I haven’t looked closely but my best guess is that it’s this issue.
Babel 6 no longer tries to make ES6 default exports the result of module.exports.
So instead of
const nextRootReducer = require('./reducers/index');
you probably want
const nextRootReducer = require('./reducers/index').default;
which matches the Babel 6 output for ES6 default exports.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
