我可以在 React/Redux App 中使用哑组件作为我的***组件吗？

Posted 2023-02-23

【中文标题】我可以在 React/Redux App 中使用哑组件作为我的***组件吗？

【英文标题】：Can I use a dumb component as my top-level component with React/Redux App?

【发布时间】：2018-08-07 20:05:34

【问题描述】：

我有以下设置：

index.js

render(
  <Provider store=store>
    <ConnectedRouter history=history>
      <Route component=App />
        <Route component=Layout >
            <Route path="/about-us" component=About />
            <Route path="/" component=Home />
        </Route>
    </ConnectedRouter>
  </Provider>,
  target
);

app.js

class App extends React.Component 

    render() 
        return (
            <div>
                this.props.children
            </div>
        );
    

layout.js

class Layout extends React.Component 

    render() 
        return (
            <div>
                this.props.children
            </div>
        );
    

然后我将为Home 和About 连接组件。我认为因为这些连接的组件与Route 一起使用，所以它们可以访问高级别的store。然后将那些连接的组件视为顶部连接的组件。这样做有什么问题吗？

【问题讨论】：

我没有看到任何问题，但也不明白它的目的

你能用更多关于路由嵌套背后的推理的信息来更新这个问题吗？因为据我所知，在 react router v4 之后，就不再需要 Route 嵌套了。

【参考方案1】：

要使用 Redux，请将组件放在提供程序中

<Provider store=store>
    [Components]  
</Provider>

并将您的操作和 redux 状态映射到组件的道具。组件只需要是 store 的 Provider 的子级即可。

import  connect  from 'react-redux';
import  bindActionCreators  from 'redux';    


const mapStateToProps = (state) => (
    ...props: ...state.reducer.desired_props
)
const mapDispatchToProps = (dispatch) => 
    return bindActionCreators(
        ...props: ...action_creator  // () =>  type: '', payload:  
    , dispatch)



const funcComp = (props) => 
    return (<div>props.message</div>)

const reduxReady = connect(mapStateToProps, mapDispatchToProps)(funcComp)


// or


class classyComp extends React.Component 
    render() 
        return (<div>this.props.message</div>)
    

const alsoReduxReady = connect(mapStateToProps, mapDispatchToProps)(classyComp)

可以在任何地方

<Provider store=store>
    <Anything>
        <reduxReady />
        <alsoReduxReady />
    </Anything>
</Provider>

【参考方案2】：

你可以这样做，没问题。

商店通过反应上下文（https://reactjs.org/docs/context.html）在组件层次结构中传播。 所以一个组件会将 redux 存储的引用提供给它的所有子组件，即使它本身没有连接。

【参考方案3】：

您绝对可以让愚蠢的组件包装智能组件，只是为了为其子组件定义布局。通常，最好的方法是让虚拟 DOM 树的叶子连接到存储，这样更容易检查状态的变化，并且只在真正需要时触发render。

这是一篇关于这个主题的精彩帖子，来自 Redux 的合著者 Dan Abramov：Presentational and Container Components