[英]React Redux - changes aren't reflected in component
I created a simple React component for generating menu, and I wanted to replace it's visibility toggling with Redux (instead of state). 我创建了一个用于生成菜单的简单React组件,我想用Redux(而不是状态)替换它的可见性切换。
My component looks like this: 我的组件看起来像这样:
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>
);
}
}
I added mapStateToProps
: 我添加了mapStateToProps
:
const mapStateToProps = (store) => {
return {
active: store.menuState.active
}
};
and connect
并connect
connect(mapStateToProps)(SiteMenu);
My store: 我的商店:
import { createStore } from 'redux';
import reducers from './reducers/index.js';
const store = createStore(reducers, window.devToolsExtension && window.devToolsExtension());
export default store;
and reducers: 和减速器:
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;
When I check my Redux DevTools, state is changing. 当我检查Redux DevTools时,状态正在改变。 What should I do? 我该怎么办?
Code in the repo: https://github.com/tomekbuszewski/react-redux 仓库中的代码: https : //github.com/tomekbuszewski/react-redux
to use connect func , also you should add Provider from react-redux 要使用connect func,还应该从react-redux添加Provider
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>
Few issues: 几个问题:
connect
returns a higher order component, so best advice is to split out each component to a separate file and export the result of connect
. connect
返回一个更高阶的组件,因此最好的建议是将每个组件拆分到一个单独的文件中,并导出connect
的结果。 See the examples at eg http://redux.js.org/docs/basics/ExampleTodoList.html . 请参见例如http://redux.js.org/docs/basics/ExampleTodoList.html上的示例。 This means that your mapStateToProps
function is never being called, hence why this.props.active
is always undefined. 这意味着您的mapStateToProps
函数永远不会被调用,因此为什么this.props.active
始终是未定义的。 createStore
is the initial state. 您的商店注册不正确, createStore
的第二个参数是初始状态。 To register the Chrome Redux dev tools see https://github.com/zalmoxisus/redux-devtools-extension 要注册Chrome Redux开发人员工具,请参见https://github.com/zalmoxisus/redux-devtools-extension <Provider>
to make the store available to all components. 您应该使用<Provider>
使商店可用于所有组件。 See the Redux docs. 请参阅Redux文档。 this.props.dispatch
or use mapDispatchToProps
, see https://github.com/reactjs/react-redux/blob/master/docs/api.md 您可以通过this.props.dispatch
调度动作,也可以使用mapDispatchToProps
,请参阅https://github.com/reactjs/react-redux/blob/master/docs/api.md
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.