在“ Connect(DataTableContainer)”的上下文或道具中找不到“存储”

时间:2019-05-10 21:28:17

标签: reactjs react-redux

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

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

但是我无法解决此错误。我已经将存储包含在提供者容器中,但是仍然遇到问题。

我遇到了错误, 在“ Connect(DataTableContainer)”的上下文或道具中找不到“存储”。将根组件包装在提供程序中,或者将“存储”作为道具明确传递给“ 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)”的上下文或道具中找不到“存储”。将根组件包装在提供程序中,或者将“存储”作为道具明确传递给“ Connect(DataTableContainer)”。

1 个答案:

答案 0 :(得分:0)

要访问商店,您将需要使用mapStateToProps函数。在此处查看文档:{​​{3}}