/react-webpack-redux

Primary LanguageJavaScript

To use the all new awesome ES6 syntax:

Let’s add that.

  1. Install the dependencies npm install babel-core babel-loader babel-preset-env --save-dev

  2. Create and configure a .babelrc

    { "presets": [ "env" ] }

  3. Tell webpack to use babel-loader to allow ES6 syntax. You can either add this as an argument in your package.json, like below:

    "scripts": { "dev": "webpack --mode development --module-bind js=babel-loader", "build": "webpack --mode production --module-bind js=babel-loader" } OR, create a webpack.config.js

    module.exports = { module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } }

Main Redux Principle

  1. The Redux store is like a brain: it’s in charge for orchestrating all the moving parts in Redux
  2. The state of the application lives as a single, immutable object within the store
  3. As soon as the store receives an action it triggers a reducer
  4. The reducer returns the next state

There are two key points for avoiding mutations in Redux:

  1. Using concat(), slice(), and …spread for arrays
  2. Using Object.assign() and …spread for objects