state必须要通过prop一层一层的传下去吗？ about mirror HOT 8 CLOSED

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

from mirror.

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

from mirror.

你的需求，可以通过 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）。

from mirror.

谢谢你回答我的问题：

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.

from mirror.

如果你想在 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 的接口文档，就会明白了。

from mirror.

这个我知道的，我的组件结构是：
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)

from mirror.

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

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

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

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

from mirror.

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

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

我follow你了，请保持联系~

from mirror.