React Redux - 更改未反映在组件中

Question

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

我的组件如下所示：

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

我添加了mapStateToProps:

const mapStateToProps = (store) => {
  return {
    active: store.menuState.active
  }
};

和connect

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;

const initialMenuState = {
  active: false
};

const menuReducer = (state = initialMenuState, action) => {
  switch(action.type) {
    case 'TOGGLE':
      console.log(action);
      return Object.assign({}, state, { active: action.active });
  }

  return state;
};

export default menuReducer;

当我检查我的 Redux DevTools 时，状态正在改变。我该怎么办？

回购中的代码：https://github.com/tomekbuszewski/react-redux

Answer 1

几个问题：

connect returns 一个高阶组件，所以最好的建议是将每个组件拆分到一个单独的文件中并导出 connect 的结果。请参阅示例，例如http://redux.js.org/docs/basics/ExampleTodoList.html。这意味着您的 mapStateToProps 函数永远不会被调用，因此 this.props.active 始终未定义。
你的店铺注册有误，createStore的第二个参数是初始状态。要注册 Chrome Redux 开发工具，请参阅 https://github.com/zalmoxisus/redux-devtools-extension
您应该使用 <Provider> 使商店对所有组件可用。请参阅 Redux 文档。
您可以通过 this.props.dispatch 或使用 mapDispatchToProps 调度操作，请参阅 https://github.com/reactjs/react-redux/blob/master/docs/api.md

Answer 2

要使用 connect func ，你还应该从 react-redux 添加 Provider

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>

React Redux - 更改未反映在组件中

React Redux - changes aren't reflected in component

javascript

reactjs

redux

react-redux