支持Code-Splitting吗
Stone8792 opened this issue · 21 comments
发现跟loadable结合state传不进来，请问这个要怎么实现
那可以贴段代码看看呢，具体的场景
`import mirror, {connect} from 'mirrorx';
import Home from '../components/Home';
mirror.model({
name: 'home',
initialState: {
homeViewCount: 0,
},
reducers: {
addCount(state, count) {
return {
...state,
}
}
}
})
export default connect(({state}) => {
console.log(state);
return state;
})(Home)
`
这是一个通过loadable加载的container，state打印出来只有routing，components/Home组件里也没有homeViewCount
@llh911001 主要不是场景啦，主要是动态加载的container包的component取不到本来该传给他的prop
首先一点，mirror 是单例的。
上面这个 container，在构建的时候，是否将 mirrorx external 掉了呢？如果没有的话，要知道，在你使用 react-loadable 加载上面这个 container 的组件里（假设为 A），也 import mirror from 'mirrorx' 了对吧？这 2 个其实是 2 个 mirror 实例
@Stone8792 有啥结论了么？
@llh911001 手上有要紧的需求去忙了，这个我明后天弄了再来同步你
@llh911001 发现好像是loadable的问题，想请教下你们是怎么实现Code-Splitting的
我们其实是自己实现了一个 AsyncComponent，参考 https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194
然后，需要注意的一点是，每个异步加载进来的组件，要跟其他组件都公用同一个 mirror 实例
我当时也有这个问题，目前的一个项目用的mirrorx，第三方vendor我已经拆分分500k一个的片段，类似 vendor1、2、3、4、5这样。但是当拆分业务代码app.js里的东西的时候，我直接从路由拆分不行，也是和楼主一样的问题，我记得要重新render一下吧？ 目前我从container拆分的UI组件，modal里的逻辑还都在一起app.js里。
我也是封装了一个asyncComp来做的分割 import(()=>)这样的
import React, { Component } from 'react';
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null,
};
}
async componentDidMount() {
const { default: component } = await importComponent();
this.setState({
component: component
});
}
render() {
const C = this.state.component;
return C
? <C {...this.props} />
: null;
}
}
return AsyncComponent;
}好希望llh给提供个没问题的路由分割的，我之前做过一次，但是如果A去修改B的state，B还没加载呢，就会找不到报错，这个还不知道如何解决
@kvkens 试试在 componentDidMount 中，importComponent 调用成功以后（await 语句后面），手动调一下 mirror.render()，注意不要加参数
@llh911001 哎呀忙的 才看到，谢谢你，我现在去测试，不好意思回复晚了。😘，周末愉快
手动调一下 mirror.render()，是可以，为什么要调用一下，可以说明一下吗。这样是不是就多了一遍render。
是不是因为model是后来异步加载后注入的，这样不会去同步state？
我还发现，在路由异步加载container，mirror.hook里面的方法不会执行
-
关于异步加载的组件和 model，调用
mirror.render()的目的很简单，本质上背后是调用了 Redux 的replaceReducer。 -
mirror.hook的问题，因为是利用了 middleware；而 middleware 不支持“动态修改”，因此，假如是在一个异步的 container 中定义了 hook，的确不会被调用。
@llh911001 十分感谢你还跟踪我回复你的问题，出差才回北京比较忙哈。
按照你说的在await之后重新render一下是可以动态注册store上的，hook就像你说的属于middleware不支持中间件，那我就用生命周期去触发。
我还发现从redux devtool上看到第一次是没有state的:
当我调用一次actions的时候就正常了，其他没问题。太感谢了！
首先感谢你的反馈，项目开源了是会长期维护的，解答问题也是应该的哈。
然后，Redux DevTool 的问题，最开始没有 dispatch action（也即调用 actions[modelName][actionName]()）时，store 应该是只有 routing 这个字段（路由状态的数据）。