Как отобразить значение состояния в реаги-редуксе - PullRequest
Новая
       6

Как отобразить значение состояния в реаги-редуксе

0 голосов
/ 15 января 2019

У меня есть приложение с функциональным счетчиком, над которым я работаю с response-redux. Я могу видеть каждый раз, когда я отправляю действие, используя мои функции увеличения / уменьшения, обновления состояния, однако я не могу фактически вывести значение моего состояния.

Это мой первый раз, когда я пытаюсь создать приложение-редуктор с модулями (в отличие от создания html-файла с избыточным cdn). Пожалуйста, помогите мне понять, что я делаю не так.

Спасибо. 


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

1 Ответ

0 голосов
/ 15 января 2019

В этом случае state на самом деле является значением, а не объектом, который хранит значение как count свойство.

Должно быть либо: 

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

Или combineReducers можно использовать для отображения конкретного редуктора как свойства магазина: 

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