Javascript React Redux-更改不是'；t反映在组件中

我为生成菜单创建了一个简单的React组件，我想用Redux（而不是state）替换它的可见性切换

我的组件如下所示：

class SiteMenu extends React.Component {
  constructor(props) {
    super(props);
  }

  toggle(force = false) {
    let active = !active;

    store.dispatch({
      type: 'TOGGLE',
      active
    });
  }

  render() {
    const wrapperClass = this.props.active ? `${this.props.className}__wrapper ${this.props.className}__wrapper--active` : `${this.props.className}__wrapper`;
    return (
      <nav className={this.props.className} ref="nav">
        <button className={`${this.props.className}__trigger`} onClick={this.toggle.bind(this)}>
          {this.props.active}
        </button>
        <ul className={wrapperClass}>
        </ul>
      </nav>
    );
  }
}

和

连接

connect(mapStateToProps)(SiteMenu);

我的商店：

import { createStore } from 'redux';
import reducers from './reducers/index.js';

const store = createStore(reducers, window.devToolsExtension && window.devToolsExtension());
export default store;

和减速器：

import { combineReducers } from 'redux';
import menuReducer from './menu-reducer';

const reducers = combineReducers({
  menuState: menuReducer
});

export default reducers;

---

当我检查Redux开发工具时，状态正在更改。我该怎么办

回购协议中的代码：

少数问题：

connect

返回一个高阶组件，因此最好的建议是将每个组件拆分到一个单独的文件中，并导出

connect

的结果。参见示例，例如。这意味着永远不会调用

mapstatetops

函数，因此

This.props.active

始终未定义

商店注册不正确，

createStore

的第二个参数是初始状态。要注册Chrome Redux开发工具，请参阅

您应该使用

使存储区可供所有组件使用。请参阅Redux文档

您可以通过

this.props.dispatch

或使用

mapDispatchToProps

来分派操作，请参阅

---

要使用connect func，还应该从react redux添加提供程序

render(<Provider store={store}><Parent /></Provider>, app);

render（，app）；

然后您应该将包装组件添加到父组件中

const SiteMenuWrapped = connect(mapStateToProps)(SiteMenu);

///in Parent component
<Header className="site-header">
      <SiteMenuWrapped 
        className="site-navigation"
        content={this.state.sections}
      />
</Header>

const SiteMenuWrapped=connect（mapStateToProps）（站点菜单）；
///在父组件中

实际上，当我观看DevTools时，它正在从

true

变为

false

。但是，我的问题是，我的组件中没有反映出这种变化。我有以下代码：

constwrapperclass=this.props.active${this.props.className}\uu包装${this.props.className}\uu包装--active`:
${this.props.className}\uu包装
`它总是
false
，即使DevTools说它应该是
true
。你是说
wrapperClass
的值仍然是
\uuuuuwrapper
而不是
\uwrapper--active
，因为
this.props.active
总是false？它总是
\uwrapper
。但是登录控制台
this.props
只返回我手工放置的道具。当我添加了
active
prop时，它也没有改变。谢谢。由于某些原因，我没有看到您发布的这个Redux示例，我很快就会看完；-）谢谢，它起作用了；-）我不明白为什么我需要一个包装器。因为“连接”是连接到商店。否则无法访问MapStateTops。而且您不需要从storebtw获取数据，您不需要在组件名中“包装”，我发现了；-）
render(<Provider store={store}><Parent /></Provider>, app);

const SiteMenuWrapped = connect(mapStateToProps)(SiteMenu);

///in Parent component
<Header className="site-header">
      <SiteMenuWrapped 
        className="site-navigation"
        content={this.state.sections}
      />
</Header>