javascript - 使用 React 设置 React-Redux

Question

我正在尝试将 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')
);

Answer 1

您在没有连接的情况下导入组件

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')
);