Javascript Gatsby Redux：组件在状态更改时不会重新渲染

当我在我的项目中实现时，我看到当组件的状态改变时，我的组件不会重新呈现，是的，我将状态视为不可变的

所以我使用了Redux，并将其代码复制到我的盖茨比项目中。 问题再次出现，使用Redux的一个示例，当状态发生更改时，组件无法重新渲染

只有通过使用this.forceUpdate，我才能在状态更改时重新渲染组件，当我删除这一行时，它停止在状态更改时重新渲染

这是我创建的盖茨比页面和我复制到的Redux代码：

import React, { Component } from 'react'
import { createStore } from 'redux'

class Counter extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log("render - start",JSON.stringify(store.getState(),null,2))
    const { value, onIncrement, onDecrement } = this.props
    return (
      <p>
        Clicked: {value} times
        {' '}
        <button onClick={onIncrement}>
          +
        </button>
        {' '}
        <button onClick={onDecrement}>
          -
        </button>
      </p>
    )
  }
}

const counter = (state = 0, action) => {
  console.log("reducer - start: ",state, JSON.stringify(action,null,2))
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const store = createStore(counter)

class TestPage extends React.Component {
  render(){
    return (
      <Counter
        value={store.getState()}
        onIncrement={() => {
          store.dispatch({ type: 'INCREMENT' })
          // this.forceUpdate()
        }}
        onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
      />)
  }
}

export default TestPage

---

您是否正确地存储了.subscribe

我让它像这样工作

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { store } from "./store";
import Counter from "./Counter";

class App extends Component {
  render() {
    return (
      <Counter
        value={store.getState()}
        onIncrement={() => {
          store.dispatch({ type: "INCREMENT" });
        }}
        onDecrement={() => store.dispatch({ type: "DECREMENT" })}
      />
    );
  }
}

const rootElement = document.getElementById("root");
const render = () => ReactDOM.render(<App />, rootElement);

render();
store.subscribe(render);

Counter.js

import React, { Component } from 'react'

class Counter extends Component {

  render() {

    const { value, onIncrement, onDecrement } = this.props
    return (
      <p>
        Value: {value} 
        {' '}
        <button onClick={onIncrement}>
          +
        </button>
        {' '}
        <button onClick={onDecrement}>
          -
        </button>
      </p>
    )
  }
}

export default Counter;

示例代码沙盒：

顺便说一句，像这样在react中使用redux没有多大意义，我们通常使用react redux包。在学习了redux基本原理之后，您一定要使用react redux软件包

---

我也尝试过store.subscribe，但结果更奇怪，只是调用了TestPage的render方法，而不是它的子计数器组件的render方法。构造函数{supper this.counter=state=0，action=>{switch action.type{case'INCREMENT'：返回状态+1 case'DECREMENT'：返回状态-1默认值：返回状态}this.store=createStorethis.counter this.store.subscribethis.render.bindthis}我已经通过插入console.log调用作为第一行，验证了调用的是TestPage的render方法，而不是其子计数器组件的render方法。在页面加载时-这两个都被调用，但是如上所述，当状态更改时，只有父级报告要登录…在问题的注释中，您可以看到我尝试store.subscribe失败。然而，我的问题在你的最后一段中得到了回答，因为我不知道React Redux甚至存在。当然，它解决了这个问题，还有更多。。。

import React, { Component } from 'react'

class Counter extends Component {

  render() {

    const { value, onIncrement, onDecrement } = this.props
    return (
      <p>
        Value: {value} 
        {' '}
        <button onClick={onIncrement}>
          +
        </button>
        {' '}
        <button onClick={onDecrement}>
          -
        </button>
      </p>
    )
  }
}

export default Counter;