Question

如果我理解正确，提供程序组件/方法可以访问redux中的store，而无需在每个组件中直接导入它。假设我的理解是正确的，那么我想知道为什么我无法在App.js中获得store.getState（）。它说商店没有定义....

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>
    );
  }
}

Answer 1

store在React Context api的帮助下在Provider类中处理。

如果要在React组件中访问存储，则必须在类中定义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

Answer 2

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

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

此外，connect执行批次工作，以确保您的实际组件仅在实际需要时重新呈现。这包括大量的memoization工作，以及来自父组件的props的比较以及mapStateToProps函数为该组件返回的值。如果不使用connect，您就会放弃所有这些性能改进，并且您的组件将不必要地重新渲染。

第三，如果手动引用组件中的商店（通过直接导入或通过上下文），则直接将它们耦合在一起，从而使测试组件变得更加困难。我个人试图让我的组件“不知道”Redux。他们从不引用props.dispatch，而是调用预先约束的动作创建者，如this.props.someFunction()。组件不“知道”它是Redux动作创建者 - 该函数可以是来自父组件，绑定的Redux动作创建者或测试中的模拟函数的回调，从而使组件更具可重用性和可测试性

有关详细信息，请参阅：

React/Redux links list

最后，我的博文Practical Redux, Part 6: Connected Lists, Forms, and Performance。

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

Answer 3

虽然magically说

我们建议的选项是使用一个名为ReactManagerBridge.m的特殊React Redux组件来magically，使商店可以使用应用程序中的所有容器组件而不显式传递它。

他们将how to use context这个词与“上下文”功能联系起来。

#import "ReactManagerBridge.h" #import "zigbang-Swift.h" @implementation ReactManagerBridge RCT_EXPORT_MODULE(ReactManager); RCT_EXPORT_METHOD(dismissPresentedViewController:(nonnull NSNumber *)reactTag) { ReactManager* reactManager = [[ReactManager alloc] init]; [reactManager dismissPresentedViewController:reactTag]; } RCT_EXTERN_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(nonnull NSNumber *)date) @end对象上提供了<Provider>，您可以通过应用组件中的store访问该对象，但请务必先了解{{3}}

React获取状态提供程序方法

3 个答案: