我为生成菜单创建了一个简单的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;
和redurs:
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时,状态正在发生变化。我该怎么办?
答案 0 :(得分:3)
使用connect func,你也应该从react-redux
添加Providerrender(<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>
答案 1 :(得分:1)
几个问题:
connect
返回更高阶的组件,因此最好的建议是将每个组件拆分为单独的文件并导出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