在“Connect（DataTableContainer）”的上下文或道具中找不到“商店”

Question

我正在使用 react-redux-datatable 插件来创建表。

react-redux-datatable 用法：https://sean-ww.github.io/react-redux-datatable/get-started/get-started.html 我已按照上述文档中给出的步骤进行操作。

但我无法解决此错误。我已将商店包含在 Provider Container 中，但我仍然遇到了问题。

我收到错误， 在“Connect(DataTableContainer)”的上下文或道具中找不到“store”。要么将根组件包装在 Provider 中，要么将“store”作为 prop 显式传递给“Connect(DataTableContainer)”。

我已经包含了两个文件 index.js 和 App.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import logger from 'redux-logger'

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import supplierReducer from './store/supplierreducer';
import { DataTableReducer } from 'react-redux-datatable';
import { connect } from 'net';

const rootReducer = combineReducers({
    supplierReducer,
    DataTableReducer
});

const store = createStore(
    rootReducer,
    applyMiddleware(logger)
);

const app = (
    <Provider store={store}>
        <App />
    </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

serviceWorker.unregister();

App.js

import DataTable from 'react-redux-datatable';

class App extends Component {
render() {
        const apiLocation = 'https://api.myjson.com/bins/j59v8';

        const tableSettings = {
            tableID: 'BasicDataTable',
            keyField: 'request_id',
            tableColumns: [
                {
                    title: 'Ref',
                    key: 'request_id',
                },
                {
                    title: 'First Name',
                    key: 'first_name',
                }
            ],
        };

        return (
            <div>
                <DataTable
                    tableSettings={this.tableSettings}
                    apiLocation={this.apiLocation}
                />
            </div>
        );
    }

}

const mapStateToProps = state => {
    return {
        name: state.name,
        address: state.address,
        supplierData: state.supplierData
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onSupplierDataListSuccess: (response) => dispatch({
            type: 'SUPPLIER_DATA_SUCCESS',
            response: response
        }),
        onSupplierDataListFailure: () => dispatch({
            type: 'SUPPLIER_DATA_FAILURE'
        })
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

我收到错误，在“Connect(DataTableContainer)”的上下文或道具中找不到“存储”。要么将根组件包装在 Provider 中，要么将“store”作为 prop 显式传递给“Connect(DataTableContainer)”。

Answer 1

为了访问商店，您需要使用mapStateToProps 函数。在此处查看文档：Connect: Extracting Data with mapStateToProps