ReactJS и combineReducers, в чем ошибка?

Question

[Михаил Р.]

Без использования combineReducers, используя один редьюсер - все работает нормально. Потребовалось разделить редьюсеры, использовал combineReducers, вроде бы все сделал по инструкции, но все равно возникает ошибка, поиск ошибки результатов не дал.

/src/index.js :

import React from "react";
import ReactDOM from "react-dom";
import {createStore} from "redux";
import {Provider} from "react-redux";

import reducersRoot from "./reducers";

const stateInitial = {count: 0}
const store = createStore(reducersRoot, stateInitial);

import AppCounter from "./AppCounter";

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

/src/AppCounter.js :

import React from "react";

import ContainerCounter from "./containers/Counter";

const AppCounter = () => (
    <ContainerCounter/>
);

export default AppCounter;

/src/reducers/index.js :

import {combineReducers} from "redux";

import reducerCounter from "./counter";

export default combineReducers({
    count: reducerCounter
});

/src/reducers/counter.js :

import * as actions from "../actions";

const counter = (state = {}, action) => {

    if(action.type === actions.COUNTER_DECREMENT) {
        return {count: state.count - action.count};

    } else if(action.type === actions.COUNTER_INCREMENT) {
        return {count: state.count + action.count};
    
    } else if(action.type === actions.COUNTER_RESET) {
        return {count: action.count};

    } return state;

}

export default counter;

/src/containers/Counter.js :

import {connect} from "react-redux";

import {countDecrement, countIncrement, countReset} from "../actions";
import ComponentCounter from "../components/Counter";

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

const mapDispatchToProps = dispatch => ({

    onCountDecrement: (event, count) => {
        event.preventDefault();
        dispatch(countDecrement(count));
    },

    onCountIncrement: (event, count) => {
        event.preventDefault();
        dispatch(countIncrement(count));
    },

    onCountReset: event => {
        event.preventDefault();
        dispatch(countReset());
    }

});

export default connect(mapStateToProps, mapDispatchToProps)(ComponentCounter);

/src/components/Counter.js :

import React from "react";

const Counter = props => {

    const refInput = React.createRef();

    return (
        <>
            <h1>{props.count}</h1>
            <a href="#" onClick={event => props.onCountDecrement(event, parseInt(refInput.current.value))}>Минус</a>
            <a style={{"margin": "0 10px"}} href="#" onClick={event => props.onCountReset(event)}>Reset</a>
            <a href="#" onClick={event => props.onCountIncrement(event, parseInt(refInput.current.value))}>Плюс</a>
            <p>
                <input type="number" ref={refInput} defaultValue="1"/>
            </p>
        </>
    );
}

export default Counter;

Answer 1

[Антон Спирин]

У вас путь от корня хранилища до значения теперь не state.count, а state.count.count.
Рекомендую установить расширение Redux Dev Tools и добавить в проект.

Comments

[Михаил Р.]

Антон Спирин Использовал Redux Dev Tools, действительно, состояние стало равно state.count.count:

У вас путь от корня хранилища до значения теперь не state.count, а state.count.count

А что нужно изменить в коде, чтобы исправить ошибку?

[Антон Спирин]

Mike Ro,
1. Уберите общий initialState.
2. Перепишите reducer:

const counter = (state = 0, action) => {
  if (action.type === actions.COUNTER_DECREMENT) {
      return state - action.count;
  }

  if (action.type === actions.COUNTER_INCREMENT) {
    return state + action.count;
  }
    
  if (action.type === actions.COUNTER_RESET) {
    return 0;
  }
 
  return state;
}

reducer так же можно переписать с if на switch/case.