state必须要通过prop一层一层的传下去吗？

[yurizhang]

我现在有三级组件：
level1组件（爷爷）--level2组件（儿子）--level3组件（孙子）

我在入口文件里注入了Mirror， 所以我可以在level1, level2组件和level3组件里自由的使用action.app.reducers,

但是我想在【level3组件】使用state时，就必须 level1里prop流向->level2里把prop流向->level3才可以~

[yurizhang]

我想能否在Mirror里增加一个节点，叫Method，和reduces与effect同级，里面定义一些方法，可以返回任意值 当然也包括state，可以允许任意嵌套组件调用。

[llh911001]

你的需求，可以通过 connect 方法解决呀。

例如：

import { connnect, actions } from 'mirrorx'
import Level3Component from './level3'

const Comp = connect(
  state => ({stateOfLevel3}),
  () => {
    return {
      methodA: actions.app.methodA
    }
  }
)(Level3Component)

然后，你的 Level3Componnet 组件的 props 就会有一个 props.methodA 属性，调用则等同于调用 actions.app.methodA（假设你定义了这样一个 reducer）。

[yurizhang]

谢谢你回答我的问题：

1. Level3Componnet是孙子组件

2. Level1Componnet是爷爷组件，包括Level2Componnet（爸爸）
   Level1Componnet代码：
   const Index=connect(state => {
   return {
   app:state.app, //mapToProps 把state做为prop送给render
   }
   })(Level1Componnet)
   render(, document.getElementById('wrapper'))

3. 得益于Mirror我可以在 这子孙三个组件里任意的使用actions.app.methodXXX

我遇到的问题是：
我想在Level3Componnet（孙子）里使用state, 就必须 level1里prop流向->level2里把prop流向->level3才可以, 所以就想能不能在任意的子孙组件（嵌套很深）里调用state.

[llh911001]

如果你想在 Level3Component 使用 state 中的某些数据，可以在 connect 的时候选取。

假设你的 state 数据结构如下：

// store.getState()
{
  app: {
    dataOfLevel1: {},
    dataOfLevel2: {},
    dataOfLevel3: {
      test: 123
    }
  }
}

那么假如你想让 Level3Component 直接就能拿到 app.dataOfLevel3，可以这样做：

const Comp = connect(
  state => {
    return {
      dataOfLevel3: state.app.dataOfLevel3
   }
  }
)(Level3Component)

事实上，connect 是来自于 react-redux 库的接口，如果你去看 react-redux 的接口文档，就会明白了。

[yurizhang]

这个我知道的，我的组件结构是：
Level1Component里import Level2Component,
Level2Component里 import Level3Component

在最外层的index.js里
const Index=connect(state => {
return {
app:state.app,
}
})(Level1Component) //Level1Component已导入了Level2Component,Level3Component

render(<Index/>, document.getElementById('wrapper'))
看，Index已渲染到dom上了~()

Level3Component即然已在Index里了
难道还要以下这样的样板文件？假如我几10个这样的小组件都要用state？
const Comp = connect(
state => {
return {
dataOfLevel3: state.app.dataOfLevel3
}
}
)(Level3Component)

[llh911001]

是的，如果你的某个 component（不管其在整个 app 中所处的层级为何）需要使用 state 里的数据，都有两种方式来获取该数据：

1. 通过父 component（父 component 已经 connect 过 state 里某些数据） 以 props 的方式传递；
2. 通过 connect 方法从 state 里取数据。

那么，“Level2Component里 import Level3Component“ 这一步骤，只需改为”Level2Component里 import Level3ComponentContainer“， Level3ComponentContainer 即是 connect 过数据的容器型组件。

也就是说，如果你的某个组件，不想通过父组件、祖父组件多次透传 props，那么就通过 connect 来订阅这个组件需要的 state 中的数据，这是完全可以的，而且是推荐的做法。

[yurizhang]

谢谢你继续解答了我的问题。
但第二种明显是不“优雅”的，我来看看mobx或是其它的怎么优化， 不然一想到写好多个connect 太恐怖了。

感谢Mirrox，我来本也是要写一个类似的库，结果先看到你们的了~：）

我follow你了，请保持联系~

[zhangyu921]

@yurizhang 我想你期望的答案是 context