Comments (8)
@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.
谢谢你回答我的问题:
-
Level3Componnet是孙子组件
-
Level1Componnet是爷爷组件,包括Level2Componnet(爸爸)
Level1Componnet代码:
const Index=connect(state => {
return {
app:state.app, //mapToProps 把state做为prop送给render
}
})(Level1Componnet)
render(, document.getElementById('wrapper')) -
得益于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 里的数据,都有两种方式来获取该数据:
- 通过父 component(父 component 已经
connect
过 state 里某些数据) 以 props 的方式传递; - 通过
connect
方法从 state 里取数据。
那么,“Level2Component里 import Level3Component
“ 这一步骤,只需改为”Level2Component里 import Level3ComponentContainer
“, Level3ComponentContainer
即是 connect 过数据的容器型组件。
也就是说,如果你的某个组件,不想通过父组件、祖父组件多次透传 props,那么就通过 connect
来订阅这个组件需要的 state 中的数据,这是完全可以的,而且是推荐的做法。
from mirror.
谢谢你继续解答了我的问题。
但第二种明显是不“优雅”的,我来看看mobx或是其它的怎么优化, 不然一想到写好多个connect 太恐怖了。
感谢Mirrox,我来本也是要写一个类似的库,结果先看到你们的了~:)
我follow你了,请保持联系~
from mirror.
Related Issues (20)
- Document usage of store.getState() in API HOT 1
- effects中 actions.routing改变hash但是没触发渲染 HOT 2
- 小程序 HOT 1
- history 包的引用方式发生改变,目前产生三个警告,需要升级写法 HOT 4
- reactv15x,react-router v3.x 的老项目 升级 ,那么 路由 的 onEnter 怎么处理? HOT 1
- 支持 react 16.8.x hooks吗? HOT 1
- 升级到最新版mirrorx后actions.routing.push无法正常跳转 HOT 1
- 支持下RN吧 HOT 1
- 页面点击刷新(F5)后点击菜单上其他页面没有反应 HOT 1
- @types/mirrorx 可否更新到最新版本呢 HOT 5
- 迁移到 React 17 报错:TypeError: Cannot set property reducers of #<Object> which has only a getter HOT 1
- 如何剥离react-router v4的路由 HOT 4
- H
- 支持Code-Splitting吗 HOT 21
- mirror与dva的区别? HOT 1
- 说说项目中使用mirrorx的情况 HOT 1
- 可以迁移到Rax吗,谢谢 HOT 1
- 请问有没有打算搞服务器端渲染 HOT 1
- 添加react-hot-loader遇到mirror.model报错,是否可以解决一下呢 HOT 8
- The demo in webpackbin isn't working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mirror.