Search code examples
javascriptreactjsreact-nativereact-redux

Adding Redux Provider store to the main index file in React


I was thinking about passing my <Provider store={Store}> directly to my main index.js file:

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

I mean, I know we can always do something like this in our App.js :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import Store from "./src/store.js"  
import Something from './src/container/Something.js';

export default class App extends React.Component {
  render() {
    return (
      <Provider store={Store}>
        <Something />     
      </Provider>
    );
  }
}

I was wondering if we can do it in Index.js, and if so then how?


Solution

  • On index.js you could create another component wrapping App:

    import {AppRegistry} from 'react-native';
    import App from './App';
    import React from 'react';
    import {Provider} from 'react-redux';
    import Store from "./src/store.js"  
    import {name as appName} from './app.json';
    
    const Root = () => (
      <Provider store={store}>
        <App />
      </Provider>
    )
    
    AppRegistry.registerComponent(appName, () => Root);