React / Redux项目未评估带括号的ES6

Question

SOLVED: I'D ADDED YARN TO THE FILE. I DELETED IT AND THE MODULES THEN REDID NPM INSTALL AND IT WORKED... not exactly sure what happened there, but that seemed to do it.

EDIT: SO IT TURNS OUT THE STRING INTERPOLATION IS NOT RELATED (using single quotes instead of back ticks - face palm) BUT THE ISSUE WITH THE CASE STATEMENT NOT BEING ABLE TO BE EVALUATED IS STILL AT LARGE.

So I'm doing Wes Bos' Redux Course , which is pretty cool and I like it so far even if it is A LOT to take in very quickly.

There have been some very few things I needed to update here and there in order to get it to work. (Such as this line in my main component, without which Hot Reloading wasn't working at all: module.hot.accept() , but which wasn't in his files )

I'm also extending the React.Component rather than using .createClass to try and be more current. Otherwise my files are by and large exactly the same as his files linked above.

I'm up to about the 13th video and I've got a problem that has stopped me completely, which I can't get past, which I only have an probably wrong idea about, but I'm hoping someone can help.

Firstly, I think this other more trivial problem may be related, my components will not do string interpolation as his will:

import React from 'react';
import { Link } from 'react-router';
import CSSTransitionGroup from 'react-addons-css-transition-group';


export default class Photo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { post, index, comments } = this.props

    return (
      <figure className="grid-figure">
        <div className="grid-photo-wrap">

          <Link to={'/view/${post.code}'}> 
            <img className="grid-photo" src={post.display_src} alt={post.caption} />
          </Link> ...

This totally works for him except this will not work for me. The link target will not be evaluated, I will have to use:

<Link to={'/view/' + post.code}>

Or else the href will come out like this:

http://localhost:7770/view/$%7Bpost.code%7D

Not able to find a reason why that wasn't working, I used the ugly string addition thing and moved on. But then I hit a stopping problem a few videos later that strikes me as similar, and may be related, so I'm asking about it here.

In his 12th video he fleshes out the posts reducer with this code:

function posts(state=[], action) {
  switch(action.type) {
    case 'INCREMENT_LIKES':
    const index = action.index;
      return [
        ...state.slice(0,index), // before what we are updating
        {...state[index], likes: state[index].likes + 1},
        ...state.slice(index + 1), // after what we are updating
      ]
    default:
      return state;
  }
}

export default posts;

This works for him as intended. For me, not at all. I get:

    5 |       return [
    6 |         ...state.slice(0,index), // before what we are updating
 >  7 |         {...state[index], likes: state[index].likes + 1},
      |          ^
    8 |         ...state.slice(index + 1), // after what we are updating
    9 |       ]
   10 |     default:

My guess is that for some reason in both cases the injected ES6 is not being evaluated. Though both these work separately elsewhere because everything else in the app relying on either injected JS or ES6 up until this point is working fine. For instance, in the first example post.display_src is evaluated fine inside brackets, as is the constant assignment using destructuring. So I don't know if the culprit is ES6 inside brackets. But that is my only idea, and as far as I can take it. Hopefully someone can bail me out so I can continue the tutorial.

PS - like I said my files are essentially identical to his except for the small changes mentioned. Still I'll include here the webpack.config.dev.js because I anticipate it may be lots of people's first port of call:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/rootMount'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],
  module: {
    loaders: [
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client'),
    },
    { 
      test: /\.styl$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    }
    ]
  }
};

And the .babelrc file:

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "plugins": [
        ["transform-object-rest-spread"],
        ["transform-react-display-name"],
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }]
      ]
    },
    "production": {
      "plugins": [
        ["transform-object-rest-spread"],
        ["transform-react-display-name"]
      ]
    }
  }
}

Answer 1

Looks like your code is not using backticks go from this:

'/view/${post.code}'  

to this:

`/view/${post.code}`

Answer 2

Ignacio's answer should help you with the first issue, remember that it is javascript and you entered ${post.code} as if it were string you can do what Ignacio did or just do <Link to={'/view/' + post.code }>

As for your reducer when using ES6 and switches I found it necessary to wrap the case's code in brackets {} so change your switch to

function posts(state=[], action) {
  switch(action.type) {
    case 'INCREMENT_LIKES':{
    const index = action.indes;
      return [
        ...state.slice(0,index), // before what we are updating
        {...state[index], likes: state[index].likes + 1},
        ...state.slice(index + 1), // after what we are updating
      ]}
    default:
      return state;
  }
}

export default posts;

Hope that helps.