Integrating Redux into the boilerplate about electron-react-webpack-boilerplate HOT 1 CLOSED

Okay. This was a ride.

TL;DR: Install "@babel/plugin-proposal-object-rest-spread" if you are going to use the spread operator, e.g. { ... state, rest }

Details:

After studying webpack and babel in general, I had a few ideas. One of them was to disable production mode in the build script.

cross-env NODE_ENV=production webpack --mode production --config webpack.build.config.js

became

cross-env NODE_ENV=production webpack --config webpack.build.config.js

This basically stopped the bundled js files from being minified/uglified, so I could take a look at it.

Note: This usually spits out errors from webpack that no mode was set in the config files, so I added mode: "none" in the config files as well.

Then taking a look at the bundled js, I saw the error was in the following line from my reducer:

// counterReducer.js
return 
{
--> ...state,
    count: state.count + 1
}

The problem was babel being unable to understand what the heck this was. So, I looked this issue up, and came across @babel/plugin-proposal-object-rest-spread. I installed the plugin using npm i --save @babel/plugin-proposal-object-rest-spread and included it in .babelrc file.

// .babelrc file
{
  ...
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

And it began to work perfectly fine in both development and production mode.

Perhaps all of the above could be avoided if I had simply used the core JS API, e.g.

Object.assign({}, state, { count: state.count + 1 })

but I haven't tested it.

from electron-react-webpack-boilerplate.