我在React中使用Redux。我已经定义了行动&减速机在程序中。我想通过onClick事件更改状态,但它没有改变。
这是我的代码:
import React, { Component, PropTypes } from 'react';
import { createStore } from 'redux';
const display = (state=0, action) => {
switch (action.type){
case 'INCREMENT':
return state+1;
case 'DECREMENT':
return state-1;
default:
return state;
}
};
const store = createStore(display);
store.dispatch({ type: 'INCREMENT'});
var ReduxApp = React.createClass({
plus(){
return store.dispatch({type: 'INCREMENT'});
},
minus(){
return store.dispatch({type: 'DECREMENT'});
},
render(){
return(
<div>
<h1>{store.getState()}</h1>
<button onClick={this.plus}>+</button>
<button onClick={this.minus}>-</button>
</div>
);
},
});
module.exports = ReduxApp;
store.subscribe(() => render(<ReduxApp />));
我尝试使用订阅方法&amp;重新渲染但不起作用。
答案 0 :(得分:2)
你几乎就在那里,你还没有将渲染连接到你的Redux商店,但你已经关闭了。
要手动连接,您可以编写类似这样的内容
store.subscribe(() => render(<MyComponent />, document.querySelector('#container'));
使用您的示例,不应该从组件内部发生,而不是从外部发生。
var MyComponent = React.createClass({});
store.subscribe();
在现实世界的场景中,您可以使用react-redux和它的Provider组件之类的东西,以便将商店连接到您的React应用程序。