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存储，并将data1和data2传递给{{1} }作为道具。

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.结束。有谁知道该怎么做？

Answer 1

@Vilva。我直接将其移至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（包装的提供程序）。请注意，我也将<App/>放在return语句中。然后，在索引中，我将ConnectedMyProvider作为render方法的最后一个子代：

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

如上所述，<App/>嵌套在ConnectedMyProvider return语句中，如果我将其嵌套在index.jsx's标记内的<ConnectedMyProvider>渲染函数中，它将不起作用。

Answer 2

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

尝试检查ownProps.data2确实有效。如果不是，这听起来像是一个愚蠢的建议，但是为什么不直接在ConnectedMyProvider上设置data2？

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

2 个答案: