React - Create connected provider arround default provider, that will take data from store and pass it as props to default provider

Question

Assume I use desired provider in my app, let name it MyProvider and wrapp my app with it. And that provider must take data1 and data2 as props:

const data1 = store.getState().data1;
const data2 = "some data";

<Provider store={store}>
    <Myprovider data1={data1} data2={data2}>
        <App/>
    </Myprovider>
</ Provider>

So data1 is retrieved from state, and data2 is predefined data. When data1 is changed (I mean when some actions are dispatched and some changes on state's data1 happen, provider doesn't detect it). So what comes to my mind is to create wrapper for Myprovider, lets call it ConnectedMyprovider that will be connected to redux store, and will pass data1 and data2 to Myprovider as props.

Code for ConnectedMyprovider would be something like:

import {connect} from 'react-redux';
import {MyProvider} from 'MyProvider';

function mapStateToProps(state, ownProps) {
    const {data1} = state.data1;
    const data2 = ownProps.data2;

    return {data1: data1, data2: data2};
}

export default connect(mapStateToProps, null)(MyProvider);

And then, wrapping my app becomes as:

const data2 = "some data";
<Provider store={store}>
  <ConnectedMyProvider data2={data2}>
    <App/>
  </ConnectedMyProvider>
</ Provider>

It ends up with error Make sure your <MyProvider> is set up correctly. No data2 provided. Does anyone know how to do this?

score 1 · Answer 1 · answered Aug 02 '18 at 13:20

@Vilva. I moved it directly into ConnectedMyProvider and added this part class ConnectedMyProvider extends Component {:

 import {Provider as TranslateProvider} from 'react-translated'; // this is provider I wrapped

    class ConnectedMyProvider extends Component {
        constructor(props) {
            super(props);
        }

        render() {
            return (
                <TranslateProvider language={this.props.language} translation={translation} >
                    <App/>
                </TranslateProvider>
            );
        }
    }

function mapStateToProps(state, ownProps) {
    return {
        language: state.language
    };
}

export default connect(mapStateToProps, null)(ConnectedMyProvider);

I defined ConnectedMyProvider as new Component and returned Provider (wrapped provider) in render function. Note that I put also <App/> in return statement. And then, in index I have ConnectedMyProvider as last child in render method:

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

As I mentioned above, <App/> is nested in ConnectedMyProvider return statement, it doesn't work if I nest it in index.jsx's render function, inside <ConnectedMyProvider> tags.

score 0 · Answer 2 · answered Aug 02 '18 at 11:51

Its been some time since I used redux but your approach seems fairly correct to me. Are you sure there are no naming/syntax errors? The logic sounds good.

Try checking that ownProps.data2is indeed working. If not, it might sound like a stupid suggestion, but why not setting data2 directly on ConnectedMyProvider?.

React - Create connected provider arround default provider, that will take data from store and pass it as props to default provider

2 Answers2