React获取状态提供者方法

如果我理解正确，提供程序组件/方法允许以redux存储访问权限，而不必直接在每个组件内导入它。假设我的理解是正确的，那么我想知道为什么我无法在App.js中获得store.getState（）。它说，店里是未定义....React获取状态提供者方法

Index.js

const store = createStore(allReducers,{}) 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('root'));

App.Js

class App extends Component { 
    render() { 
    console.log(store.getState()) 
    return (
     <div className="App"> 
     <div className="individual"> 
      <House/> 
      <NameTag/> 
     </div> 

     </div> 
    ); 
    } 
}

来源

2017-06-16 Yoni Messing

您不应该通常尝试以这种方式访问商店。

虽然你可以手动编写代码订阅终极版存储在您反应的组分，但绝对没有理由自己编写代码。由React-Redux的connect函数生成的包装器组件已经为您存储了订阅逻辑。这些包装器组件还使用您提供的mapStateToProps函数来提取每个组件从Redux状态所需的数据。所以，你不会在你自己的组件中调用store.getState()。

此外，connect做了lot的工作，以确保您的实际组件只有在实际需要时才重新渲染。这包括大量的记忆工作，以及来自父组件的道具比较以及该组件的mapStateToProps函数返回的值。通过不使用connect，您将放弃所有这些性能改进，并且您的组件将不必要地重新渲染。第三，如果您手动引用组件中的商店（无论是通过直接导入还是通过上下文），都会将它们直接耦合在一起，从而使组件更难测试。我个人试图让我的组件“不知道”Redux。他们从未引用props.dispatch，而是称之为预先绑定的动作创建者，如this.props.someFunction()。组件不会“知道”它是一个Redux动作创建器 - 该函数可以是来自父组件，回调动作创建者或测试中的模拟函数的回调，从而使组件更具可重用性和可测试性。

欲了解更多信息，请参见：

的Redux FAQ section on performance
的Redux FAQ entry on connecting multiple components
的Redux FAQ entry on components re-rendering too often
的Redux FAQ entry on importing the store directly
我React/Redux links list
最后，我的博客的Redux Performance节后Practical Redux, Part 6: Connected Lists, Forms, and Performance。

来源：我是Redux的维护者，也是Redux FAQ的作者。

来源

2017-06-17 03:42:34 markerikson

虽然Redux's docs说

我们推荐的选择是使用一个名为<Provider>到magically的特殊React Redux组件使存储可用于所有包含应用程序中没有明确传递它的组件。

连接了这个词magically反应的语境功能。

所以store是可用的context对象，您可以通过this.context您的应用组件内部访问，但要确保你知道how to use context第一

来源

2017-06-16 06:20:48 Faris

店在供应商类阵营上下文API的帮助下处理。

如果您要访问存放在阵营组件，你必须定义在类contextTypes这样的：

class App extends Component { 
    static contextTypes = { 
    store: PropTypes.object, 
    } 
    render() { 
    console.log(this.context) 
    return (
     <div className="App"> 
     <div className="individual"> 
      <House/> 
      <NameTag/> 
     </div> 

     </div> 
    ); 
    } 
}

如果你想要去的细节，你可以在这里学习https://facebook.github.io/react/docs/context.html

来源

2017-06-16 06:22:31

但是，请注意，您**不应**通常以这种方式直接访问商店。使用React-Redux'connect（）'函数来创建包装器组件，以替代地管理商店订阅。 – markerikson

@markerikson我同意。如果我们必须从存储中访问一些值，那么我们应该使用connect（）函数来创建一个包装器。但是我遇到了一种情况，我需要在共享同一商店的单个应用程序中处理两个提供程序组件。在这种情况下，我使用上下文类型来获得商店。 –

呃......没有道理。你是否说_two_ Redux Providers缠绕在一起？还是一个Redux Provider和一个与其他库相关的组件？ – markerikson

React获取状态提供者方法

回答

相关问题