Redux — ошибка «Objects are not valid as a React child» при объединении редюсеров через combineReducers. Как можно исправить?

Question

[bormor]

Делаю заготовку для проекта с объединением нескольких редьюсеров (пока редьюсер 1).

При попытке использовать combineReducers выдает ошибку:

Objects are not valid as a React child (found: object with keys {counterReducer}). If you meant to render a collection of children, use an array instead.
    in div (at Counter.js:10)
    in Counter (created by Connect(Counter))
    in Connect(Counter) (at index.js:50)
    in Provider (at index.js:49)

В чем может быть причина?

1. Код редьюсера

// src/store/counter/reducer.js
export default function counterReducer(state = 0, action) {
    switch (action.type) {
        case 'ADD':
            return state + action.step;
        case 'REMOVE':
            return state - action.step;
        default:
            return state;
    }
}

2. Код объединения редьюсеров

// src/store/reducers.js
import { combineReducers } from 'redux';
import counterReducer from './counter/reducer';

export default combineReducers({
    counterReducer
});

3. Код где использую объединенный reducer

import React from 'react';
import ReactDOM from 'react-dom';

import { createStore } from 'redux';
import { Provider } from 'react-redux'; 

import Counter from './components/Counter';

import counterReducer from './store/counter/reducer';
import reducer from './store/reducers';


let store = createStore(reducer); 


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

4. Код компонента

// src/components/Counter.js
import React from 'react';
import { connect } from 'react-redux';

import { add, remove } from '../store/counter/actions';

function Counter(props) {
    const { count, add, remove } = props;

    return (
        <div>
            <button onClick={() => add(5)}> +5 </button>
            <button onClick={() => add(1)}> +1 </button>
            {count}
            <button onClick={() => remove(1)}> -1 </button>
            <button onClick={() => remove(5)}> -5 </button>
        </div>
    );
}

function mapStateToProps(state) {
    return {
        count: state,
    };
}

function mapDispatchToProps(dispatch) {
    return {
        add: step => dispatch(add(step)),
        remove: step => dispatch(remove(step)),
    };
}

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

5. Код генератора actions

// src/store/counter/action.js
export function add(step){
    return {type: 'ADD', step:step}
}

export function remove(step){
    return {type: 'REMOVE', step:step}
}

Comments

[Виктор]

Пожалуйста, выложите еще код компонента и если используете, react-redux, то код вызова connect.

[Роман Александрович]

Создайте ещё один режиссер и засуньте его в объект комбайна

Answer 1

[Виктор]

Пожалуйста, выложите еще код компонента и если используете, react-redux, то код вызова connect.
По ошибке выглядит, как будто у вас где-то передача дочерним компонентом простого объекта, например {props} вместо {props.children}.

Comments

[bormor]

Добавил

[bormor]

В вопросе это листинг №4.

[Виктор]

Вызов

combineReducers({
    counterReducer
})

вернет стор вида {counterReducer: 0},
а не просто ноль.

Соотвественно

function mapStateToProps(state) {
    return {
        count: state.counterReducer,
    };
}

[bormor]

Виктор, спасибо. Именно оно.

[Виктор]

Поставьте тогда галочку, если Вас не затруднит.

Answer 2

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

Вы пытаетесь отрендерить объект состояния и ловите исключение.
У вас в свойство count передается объект:

{
  counterReducer: 0,
}

Исправьте mapSateToProps на:

function mapStateToProps(state) {
    return {
        count: state.counterReducer,
    };
}

или:

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

Answer 3

[Sergey Epifanov]

покажите код, где вы используете редьюсер. такое ощущение, что вы просто вставили counterReducer в метод render какого-то компонента

Comments

[bormor]

Добавил. Листинги №2 и №3 в вопросе.

[bormor]

Может причина в том, что использую сombineReducer с 1 редьюсером?

export default combineReducers({
    counterReducer
});