Reactjs 创建一个将 Redux 传递给其 children 的提供者组件

Question

我想知道是否可以为 children 创建一个 parent 包装器，它会自动将 redux 存储的一部分传递给它的 children。

示例

<ReducProvider src="user">

  <ul> {this.props.data.map(f=><li>{f.name}</li>)} </ul>

</ReducProvider>

这里我希望使用 props.data = ReduxProvider 传递给它的数据来呈现这个 ul。

我知道我可以像这样使用连接简单地得到我需要的部分

connect( (state,prop)=>({data:state[prop.src]}) )(ReduxProvider)

但有时我不想让 parent 监听商店的变化，我也不想让 child 知道这些数据来自哪里，所以我打算为我拥有的每个 Reducer。这样，当商店发生变化时，这些提供者是唯一获得更新的人。

Answer 1

虽然这不是您问题的答案，但可能会解决您的问题。

您可以创建无意义的代理组件。这些组件呈现实际组件并将正确的变量作为道具传递。我记得读过你可以自动生成这样的组件。

ES6 中此类组件的示例：

import React from 'react';
import { connect } from 'react-redux';
import User from './User';

class AuthenticatedUser extends React.Component {

    render() {
        return <User user={this.props.user} />
    }
}

export default connect(
    (state) => ({ user: state.Authentication.user }),
    (dispatch) => {}
)(AuthenticatedUser);

！代码未经测试
所以这段代码会将经过身份验证的用户从状态注入到 User 组件中。保持 User 组件干净，即您可以从任何来源呈现您喜欢的任何用户。同时您还创建了选项来呈现自动链接到商店的用户的连接版本。

实际问题的答案：
我建议不要这样做，因为上下文是一个彻头彻尾的坏习惯。但是您可以将变量存储在上下文中。 Children 然后可以在使用 contextTypes 属性.

请求时访问这些变量

Reactjs 创建一个将 Redux 传递给其 children 的提供者组件

Reactjs create a provider component that pass Redux to its children

reactjs

redux

react-redux