React - 在默认提供者周围创建连接的提供者，这将从存储中获取数据并将其作为道具传递给默认提供者

Question

假设我在我的应用程序中使用所需的提供程序，将其命名为

MyProvider

并用它包装我的应用程序。该提供者必须将

data1

和

data2

作为道具：

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

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

所以

data1

是从状态中检索出来的，data2是预定义的数据。当

data1

发生更改时（我的意思是，当调度某些操作并且发生

state's data1

上的某些更改时，提供程序不会检测到它）。 所以我想到的是创建

wrapper for Myprovider

，我们称之为

ConnectedMyprovider

，它将连接到 redux store，并将

data1

和

data2

作为 props 传递给

Myprovider

。

ConnectedMyprovider

的代码类似于：

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

然后，包装我的应用程序变成：

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

最终出现错误

Make sure your <MyProvider> is set up correctly.

未提供

data2

。有谁知道该怎么做吗？

Answer 1

@维尔瓦。 我直接把它移到

ConnectedMyProvider

并添加了这部分

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

我将

ConnectedMyProvider

定义为新组件，并在渲染函数中返回

Provider

（包装的提供程序）。请注意，我还在 return 语句中添加了

<App/>

。然后，在索引中，我将

ConnectedMyProvider

作为渲染方法中的最后一个子元素：

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

正如我上面提到的，

<App/>

嵌套在

ConnectedMyProvider

返回语句中，如果我将它嵌套在

index.jsx's

渲染函数中，

<ConnectedMyProvider>

标签内，它不起作用。

Answer 2

自从我使用 redux 以来已经有一段时间了，但你的方法对我来说似乎相当正确。您确定没有命名/语法错误吗？逻辑听起来不错。

尝试检查

ownProps.data2

是否确实有效。如果不是，这听起来可能是一个愚蠢的建议，但为什么不直接在 ConnectedMyProvider 上设置 data2 呢？