如何在react-redux中顯示狀態值

Question

我有一個正在使用react-redux的功能計數器應用程序。 我每次使用增量/減量函數調度動作時都可以看到狀態更新，但是，我實際上無法輸出狀態值。

這是我第一次嘗試使用模塊構建redux應用程序（與使用redux cdn構建html文件相反）。 請幫助我弄清楚我在做什么錯。

謝謝。

//App.js

import { Increment, Decrement } from './redux'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>{this.props.count}</h1> //Doesn't output anything
        <button onClick={this.props.Increment}>+</button>
        <button onClick={this.props.Decrement}>-</button>
      </div>
    );
  }
}

const mapStateToProps = state => ({
    count: state.count
})

const mapDispatchToProps = {
    Increment,
    Decrement
}

const AppContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(App)

export default AppContainer

//redux.js 

import { createStore } from 'redux';

export const Increment = () => {
    return {
        type: 'INCREMENT'
    }
}

export const Decrement = () => {
    return {
        type: 'DECREMENT'
    }
}


export const reducer = (state = 0, action) => {
    switch(action.type){
        case 'INCREMENT':
        return state + 1

        case 'DECREMENT':
        return state - 1

        default:
        return state
    }
}


export function configureStore(intitalState = 0){
    const store = createStore(reducer, intitalState)
    return store;
}

export const store = configureStore()

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import { store } from './redux';
import AppContainer from './App';

ReactDOM.render
(<Provider store={store}>
    <AppContainer/>
</Provider>, document.getElementById('root'));

Answer 1

在這種情況下， state實際上是一個值，而不是將值存儲為count屬性的對象。

應該是：

const mapStateToProps = state => ({
    count: state
})

或combineReducers可用於將特定的reducer映射為store屬性：

const store = createStore(combineReducers({count: reducer }), intitalState)