Javascript 为什么即使默认状态为“true”，redux存储状态在render（）中仍显示“false”？

我有以下代码。它使用的是旧版本的React，但是为什么redux会存储状态，

！！此.state.checked

，在

render（）中显示为
false
。。。尽管
defaultState
为
true

index.js

import ReactDOM from 'react-dom';
import React from 'react';
import { createStore } from 'redux';



const defaultState = { checked: true };
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'TOGGLE':
      return { ...state, checked: !state.checked };
    default:
      return state;
  }
};
const store = createStore(reducer);



class App extends React.Component {

  constructor() {
    super();
    this.state = {};
  }

  // deprecated from react version 17
  // but this is using react version 15 only
  componentWillMount() {
    store.subscribe(() => this.setState(store.getState()));
  }

  render() {
    return (
      <div>
        why is this still false?
        {
          String(!!this.state.checked)
        }
      </div>
    );
  }
}



ReactDOM.render((
  <App />
), document.getElementById('root'));

我创建了一个演示过程顺序和当前redux状态的示例

如您所见，Redux状态实际上是您期望的状态的最新状态。但是，最初从未设置组件状态。这是因为您传递给的回调在装载时从未被调用

您可以通过在构造函数中将初始状态设置为redux状态来解决此问题：

class App extends React.Component {

  constructor() {
    super();
    this.state = store.getState();
  }

仅在redux存储中进行更改时触发，例如，在分派之后。您应该在构造函数中使用
store.getState（）
进行初始状态创建。我已经在
componentWillMount（）中运行了
store.getState（）
。这还不够吗？如果我将其改为
componentDidMount（）
，会怎么样？不，因为您在
subscribe
方法中传递的回调不会在不发送操作的情况下被调用。@Christiaan好的，所以我知道目前没有
dispatch
，所以该值不应该切换。但是，我不明白为什么它不显示
defaultState
，这是
true
。我想它应该只是显示了
defaultState
，并且没有改变。@Christiaan好的，我认为你的第一个评论对我来说更有意义。所以，本质上，你是说除非发生
调度
。。。即使是初始状态创建也不会发生。因此，当访问该变量时，它最终为false。但是，当构造函数中发生
store.getState（）
时，它将导致创建存储，并因此发生
defaultState
。感谢您抽出时间。非常感谢！
  ...

  "dependencies": {
    "history": "^4.3.0",
    "marked": "^0.3.6",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.8.1",
    "redux": "^3.6.0",
    "superagent": "^2.3.0",
    "superagent-promise": "^1.1.0"
  },

  ...

class App extends React.Component {

  constructor() {
    super();
    this.state = store.getState();
  }