React Redux - 更改未反映在组件中 [英] React Redux - changes aren't reflected in component
本文介绍了React Redux - 更改未反映在组件中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了一个简单的 React 组件来生成菜单,我想用 Redux(而不是状态)替换它的可见性切换.
I created a simple React component for generating menu, and I wanted to replace it's visibility toggling with Redux (instead of 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>
);
}
}
我添加了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 时,状态正在改变.我该怎么办?
When I check my Redux DevTools, state is changing. What should I do?
存储库中的代码:https://github.com/tomekbuszewski/react-redux
推荐答案
要使用 connect func ,还应该从 react-redux 添加 Provider
to use connect func , also you should add Provider from react-redux
render(<Provider store={store}><Parent /></Provider>, app);
那么你应该将包裹的组件添加到父组件
then you should add wrapped component to Parent component
const SiteMenuWrapped = connect(mapStateToProps)(SiteMenu);
///in Parent component
<Header className="site-header">
<SiteMenuWrapped
className="site-navigation"
content={this.state.sections}
/>
</Header>
这篇关于React Redux - 更改未反映在组件中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文