umi+dva+react项目dva model的state和namespace未在props及Redux DevTools显示如何解决

问题根因 #

你编写的dva model未被正确注册到dva实例中，umi集成的dva插件默认不会自动加载src/pages/Model/目录下的model文件，因此该Todo命名空间的状态根本没有注入到redux store中，自然无法在组件props中读取，也不会在Redux DevTools中展示。

umi内置dva的默认自动注册规则如下：

• 全局model：仅自动加载src/models/目录下的所有.js文件为全局可用model
• 页面级model：仅自动加载当前页面目录下models/子目录内的model，且只有对应路由被访问时才会注册

解决方案 #

可任选以下任意一种方案处理：

方案1：走全局model自动注册规则 #

将src/pages/Model/HomeData.js移动到src/models/目录下，重启项目后umi会自动扫描注册该model，即可正常使用。

方案2：走页面级model自动注册规则 #

在src/pages/Home/目录下新建models子目录，把HomeData.js移动到该子目录内，访问Home页面时会自动注册该model，离开页面时自动卸载，适合仅Home页面使用的场景。

方案3：自定义目录手动指定加载 #

如果一定要将model存放在src/pages/Model/目录下，修改.umirc.js的dva配置，通过extraModels手动指定加载路径：

// .umirc.js 内dva配置修改为
dva: {
  immer: true,
  extraModels: [
    './src/pages/Model/HomeData.js'
  ]
},

修改后重启项目即可生效。

验证方式 #

配置生效后可优化mapStateToProps直接获取对应命名空间的数据，写法更清晰：

const mapStateToProps = (state) => {
  return {
    todoData: state.Todo
  }
}

此时打印props即可看到对应数据，Redux DevTools中也会出现Todo命名空间的状态信息。

内容的提问来源于stack exchange，提问作者praful