Egghead平台Dan的Redux课程中ReactDOM渲染失效问题求助

Hey there! Let's get to the bottom of why your Redux-connected component isn't updating when you dispatch actions.

The Root Cause: A Missing Comma #

Looking at your code, the main issue is a missing comma in the ReactDOM.render call. You forgot to separate the JSX component from the target DOM element argument, which causes a syntax error that breaks the entire render function.

Corrected Code #

Here's the fixed version of your render function, with the critical comma added:

const render = () => {
  ReactDOM.render(
    <Counter 
      value={store.getState()}
      onIncrement={() => store.dispatch({type:'INCREMENT'})}
      onDecrement={() => store.dispatch({type:'DECREMENT'})}
    />, // <-- This comma was missing!
    document.getElementById('root')
  );
}

Troubleshooting Tips for Future Issues #

If you run into similar problems down the line, here's what to check first:

• Check the Browser Console: Syntax errors (like missing commas or brackets) will almost always show up here, and they're the #1 culprit for broken rendering. Just hit F12 to open DevTools and look for red error messages.
• Verify Redux Subscription: Make sure store.subscribe(render) is called after defining your render function (which you did correctly here). This tells Redux to re-run the render function every time the state changes.
• Double-Check JSX Syntax: JSX has strict rules for separating props and arguments—even tiny missing punctuation can bring everything to a halt.

Once you add that comma, your component should update correctly every time you click the increment/decrement buttons!

内容的提问来源于stack exchange，提问作者InquisitiveGirl