React 报错 Objects are not valid as a React child (found: object with keys {})

React目中使用Redux声明多个Reducer，并且使用Redux的connect组件链接 Reducer和Action。由于项目中声明多个Reducer需要合并来优化代码，固采用Redux的combineReducers组件完成该需求，代码完成后报错，具体信息如下：

报错原文
Objects are not valid as a React child (found: object with keys {counter, auth}). If you meant to render a collection of children, use an array instead.

原文翻译
对象作为React子对象无效（找到：具有键{counter，auth}的对象）。如果您要渲染子集合，请使用数组。

0. 依据报错信息定位到代码具体位置如下：

// Reducer.js
import { combineReducers } from 'redux';
import { counter } from  './index.redux';
import { auth } from  './auth.redux';
export default combineReducers({ counter, auth }) // 合并多个 Reducer

// App.js
@connect (
  state => ({num: state }),  
  { addGun, removeGun, addGunAsync }, 
)

1. 尝试修改App.js 代码如下，无报错信息，但action 无法生效：

// App.js
@connect (
  state => ({num: 10}),  // 修改为数字 10
  { addGun, removeGun, addGunAsync }, 
)

2. 然后输出state如下，实际上state返回的是所有state的对象形式的集合：

# 浏览器控制台输出内容
{
	auth: {isAuth: false, user: "李云龙"}
	counter: 10
}

3. 在App.js中只使用了counter数据状态，然后改成如下代码问题解决：

// App.js
@connect (
  state => ({num: state.counter }), // 只需要取 state.counter 的值
  { addGun, removeGun, addGunAsync }, 
)

小结

针对这类无法直观判断报错问题原因的情况，只能先定位到报错信息显示的具体某个位置，然后修改相关联的代码来排除。在有疑惑的位置输出对应的状态或者数据进行判断，最终排除报错的问题。