Question

我使用带有redux的WiX导航。 https://wix.github.io/react-native-navigation/#/usage

在app.jsx文件中，我使用redux store注册我的所有屏幕：

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);
registerScreens(store, Provider);

在registerSceens.js中我绑定了redux商店：

export default (store, Provider) =>  {
Navigation.registerComponent('aApp.FooComponent', () => FooComponent, store, 
Provider);
}

所以在FooComponent中，我如何轻松访问redux商店？

export default class FooComponent extends Component {
constructor(props) {
    super(props);
    console.log(store); //i need REDUX store 
}

Answer 1

您需要连接您的组件，然后您可以从上下文中获取商店，如下所示：

class FooComponent extends Component {
  static contextTypes = {
    store: object,  // <--- allow this component to access the store
  };

  componentWillMount(props) {
     const { store } = this.context; // <-- Get it!!
     console.log(store); //i need REDUX store 
  }
}
export default connect()(FooComponent);

定义contextTypes后，您可以从this.context访问商店。

虽然你可以这样做......问题是......为什么你会这样做？ connect已经允许您访问状态并绑定操作，这通常是您所需要的。根据经验，将组件尽可能保持愚蠢总是一个好主意。

Answer 2

您需要使用react-redux将FooComponent连接到redux。之后，您可以通过道具访问任何内容。

WiX导航从注册组件

2 个答案: