Question 222036 in React native Question posted in
The official React Native documentation can be found here.

Accessing redux store and provider in custom npm package in React Native

My organization created a big RN app. Now they planned to create multiple other products. some products have similar kinds of functionality components. But redux has been used widely for calling API, maintaining state, and updating UI.
I have created my own npm package in which I placed common components so that other applications can use them. I don’t want redux dependencies should be there in common components. I want to access the redux store/provider from the npm package components. Is it possible?
Package.json file in dependencies,

"dependencies": {
        "react-native-ui": "git+https://github.myorg.com/myOrg/orgUI.git#feature/UIComponents",

In app.tsx,

import { MyCommonComponent } from 'react-native-common-ui';
return (
        <Provider store={store}>
            <MyCommonComponent />
        </Provider>
    );
};

Is it possible store is accessible in my MyCommonComponent?

Tags:

2

Answers


  1. 0

    better copy npm package as your library, you can access redux easy

    Login or Signup to reply.
  2. 0

    you can pass the Redux store as a prop to the components in your npm package, making them independent of Redux while still being able to interact with the store when used in an application.

    Here’s how you can modify your npm package components to accept the Redux store as a prop:

    In your npm package, modify the component to accept a store prop:

    // MyCommonComponent.js

import React from 'react';

const MyCommonComponent = ({ store }) => {
  // Your component logic here, you can use the `store` prop to access the Redux store
  return <div>My Common Component</div>;
};

export default MyCommonComponent;

    In the application where you are using the npm package components, pass the Redux store as a prop to the component:

    import { MyCommonComponent } from 'react-native-common-ui';
import { Provider } from 'react-redux';
import store from './your-redux-store'; // Import your Redux store here

const App = () => {
  return (
    <Provider store={store}>
      <MyCommonComponent store={store} />
    </Provider>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search