我正在尝试将 redux
实现到 react
中。我了解stores
、reducers
和actions
如何工作的基础知识。我现在正在尝试设置react-redux
。我知道网上有相当多的文档,并且除了解释之外,遵循它也有点棘手。
这是我在下面尝试过的,但它不起作用。任何人都可以发现一些明显的错误。我想我已经很接近了,但是犯了一些小错误。屏幕上根本没有呈现任何内容。
这是一个jsiddle .
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { connect } from 'react-redux';
function counter(state = 0, action) {
switch(action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
var store = createStore(counter);
const mapStateToProps = function(store) {
return {
count: store.getState()
};
}
class App extends React.Component {
increaseCounter() {
store.dispatch({
type: 'INCREMENT'
})
}
render() {
return (
<div>
<h1>Test</h1>
<h1>{this.props.count}</h1>
<button onClick={this.increaseCounter.bind(this)}>Click here </button>
</div>
)
}
}
connect(mapStateToProps)(App);
ReactDOM.render(
<App />
, document.getElementById('app')
);
最佳答案
您在没有连接的情况下导入组件
connect(mapStateToProps)(App);
ReactDOM.render(
<App />
, document.getElementById('app')
);
试试这个
ReactDOM.render(
connect(mapStateToProps)(App)
, document.getElementById('app')
);
或者这个
const ConnectedApp = connect(mapStateToProps)(App);
ReactDOM.render(
<ConnectedApp/>,
document.getElementById('app')
);
关于javascript - 使用 React 设置 React-Redux,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41504349/