невозможно получить состояние в реактивном компоненте от редукса

Question

Я пытаюсь отобразить избыточное состояние в моем компоненте реакции, но оно не определено. Я не могу понять, где я делаю ошибку. Я изучаю избыточность, пытаясь самостоятельно кодировать, просматривая документацию по избыточности.

Основной компонент React

import React, { Component } from 'react';
import Counter from './components/Counter';
import {Provider} from 'react-redux';
import store from './redux/store';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <h1>COUNTER APPlICATION</h1>
          <Counter />
        </div>
      </Provider>
    )
  }
}

export default App;

Компонент React

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {addNumber} from '../redux/actions/addAction';
import {substractNumber} from '../redux/actions/substractAction';

export class Counter extends Component {
  render() {
    return (
      <div>
        <h1>Value:{this.props.value}</h1>
        <h1>Add Only Value:{this.props.addOnly}</h1>
        <button onClick = {() => this.props.addNumber}>+</button>
        <button onClick = {() => this.props.substractNumber}>-</button>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  value: state.value
});

export default connect(mapStateToProps, {addNumber, substractNumber})(Counter);

addReducer

import {ADDITION} from '../actions/actionTypes';

const initialState = {
  value: 50
}

export default function (state = initialState, action) {
  switch(action.type){
    case ADDITION:
      return{
        value: state.value + 2
      }
    default:
      return state
  }
}

substractReducer

import {SUBSTRACTION} from '../actions/actionTypes';

const initialState = {
  value: 50
}

export default function (state = initialState, action) {
  switch (action.type) {
    case SUBSTRACTION:
      return {
        value: state.value - 2
      }
      default:
        return state
  }
}

rootReducer

import {combineReducers} from 'redux';
import addReducer from './addReducer';
import substractReducer from './substractReducer';

export default combineReducers({
  add: addReducer,
  substract: substractReducer
})

store

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers/rootReducer';
import thunk from 'redux-thunk';

export default createStore(rootReducer, applyMiddleware(thunk));

тип действия

export const ADDITION = 'ADDITION';
export const SUBSTRACTION = 'SUBSTRACTION';

addAction

import {ADDITION} from './actionTypes';
export const addNumber = () => (dispatch) => {
  return dispatch({
    type: ADDITION,
    payload: 2
  })
}

substractAction

import {SUBSTRACTION} from './actionTypes';

export const substractNumber = () => (dispatch) => {
  return dispatch({
    type: SUBSTRACTION,
    payload: 2
  })
}

Answer 1

Вы делаете неправильно.

1. Вы заявляете, что это просто значение счетчика, поэтому не делитесь на два редуктора. Вам нужны только два оператора case, один для ADD, один для SUBTRACT.

2. Не используйте combineReducer, и если хотите, используйте один ключ, например counter для счетчика-редуктора

3. в mapStateToProp, получите значение типа state.counter.value, где counter - это имя ключа, которое вы использовали в combineReducer({ counter: counterReducer })

4. Действия вашей кнопки / onclick неправильно

import {ADDITION, SUBTRACTION} from '../actions/actionTypes';

const initialState = {
  value: 50
}

export default function (state = initialState, action) {
  switch(action.type){
    case ADDITION:
      return 
        value: state.value + 2
      }
      
   case SUBTRACTION:
      return{
        value: state.value + 2
      }
    default:
      return state
  }
}

///// no need to regester 2 reducer, just add one above like this

export default combineReducers({
  counter: counterReducer
});

/// In Counter component , mapStateToProp
const mapStateToProps = state => ({
  value: state.counter.value
});

// Just pass redux actions to onClick in button like this
<button onClick = {this.props.addNumber}>+</button>
<button onClick = {this.props.substractNumber}>-</button>

Answer 2

Когда вам combineReducers нравится это:

export default combineReducers({
  add: addReducer,
  substract: substractReducer
})

Ваше дерево состояний будет выглядеть так:

{
    add: {
        value: 0
    },
    subtract: {
        value: 0
    }
}

Таким образом, у вас должен быть только один редуктор, чтобы уменьшить то же значение.