javascript - Gatsby-Redux : Component doesn't re-render on state changes

Question

当我实现Redux时在我的Gatsby项目中，我发现当组件的状态发生变化时，我的组件不会重新渲染(是的，我将状态视为不可变)。

所以我使用了Redux的Conuter example ，并将其代码复制到我的 Gatsby 项目中。然后问题又出现了，状态改变时组件无法重新渲染(使用 Redux 的一个例子!)。

只有使用 this.forceUpdate()，我才能在状态更改时重新渲染组件，并且当我删除此行时，它会停止在状态更改时重新渲染。

这是我创建的 Gatsby 页面以及我复制到的 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

Answer 1

你正确的store.subsribe()吗？

我让工作像这样工作。

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);

store.js

import { createStore } from "redux";

const counter = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};


export const   store = createStore(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;

示例代码和框: https://codesandbox.io/s/redux-counter-2oftu

顺便说一句，像这样在react中使用redux没有多大意义，我们通常使用react-redux包。在学习了 redux 基础知识之后，你绝对应该使用 react-redux 包。

https://react-redux.js.org/