使用react-redux-datatable包进行数据列表但我有显示错误

时间:2019-01-19 12:54:14

标签: node.js reactjs mongodb express mern

我将使用redux并使用react-redux-datatable包将我的所有代码放入service.js文件中,但我尝试运行此代码,然后给我这种类型的错误,我该如何解决此错误,请帮助我...

  

在“ Connect(DataTableContainer)”的上下文或道具中找不到“存储”。将根组件包装在中,或者将“存储”作为道具明确传递给“ Connect(DataTableContainer)”。

service.js

import React, { Component } from 'react';
import DataTable from 'react-redux-datatable';
import 'react-redux-datatable/dist/styles.css';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import {Link} from 'react-router-dom';
import {getServices} from '../../actions/servicesActions';
import Spinner from '../Spinner';

class Services extends Component{

  componentDidMount(){
    const api= this.props.getServices();
  } 

 render(){
    const services=this.props.services;
  const tableSettings = {
      tableID: 'AdvancedFeaturesTable',
      wrapperType: 'section',
      displayTitle: 'Requests Table',
      keyField: '_id',
      defaultSort: ['_id', 'desc'],
      minWidth: 880,
     useLocalStorage: true,
     tableColumns: [
        {
          title: '_id',
          key: '_id',
          width: 90,
        },
        {
          title: 'Name',
          key: 'name',
          width: 90,
        },
        {
          title: 'Description',
          key: 'description',
          width: 90,
        }, 

        {
          title: 'Status',
          key: 'status',
          width: 164,
        },
        {
          title: 'Subscription',
          key: 'subscription',
          width: 90,
        },
    ],
};

return(
    <div>
    <DataTable
      tableSettings={tableSettings}
      apiLocation={this.props.service}
    />
  </div>
   )}
}
const mapStateToProps = state => {    
  return {
    service: state.services.service
  };
};
export default connect(
  mapStateToProps,
  {
    getServices
  }
)(Services);

serviceaction.js

import axios from 'axios';
import {GET_SERVICES,LOADING,GET_ERRORS,DELETE_SERVICES,EDIT_SERVICES} from './types';

export  const getServices=() =>dispatch => {
    dispatch(setLoading());
    axios.get('/api/admin/services')

    .then(res =>

        dispatch({ 
            type:GET_SERVICES,
            payload:res.data
        })
    )

      .catch(err =>
      dispatch({
        type: GET_SERVICES,
        payload: {}
      })
    )
}

serviceReducer.js

import { GET_SERVICES, LOADING ,DELETE_SERVICES ,EDIT_SERVICES} from '../actions/types';

const initialState={
    loading:false,
    service:[],
    service:{}
}

export default function(state=initialState,action){
    switch (action.type){
        case LOADING:
        return{
            ...state,
            loading:true    
        };
        case GET_SERVICES:
        return{
            ...state,

            // console.log(action.payload);
            service:console.log(action.payload) ,
            loading:false
        };
        case EDIT_SERVICES:
        return{
            ...state,

            service:action.payload,
            loading:false
        };
        case DELETE_SERVICES:
        return{
            ...state,

            loading:false
        };
        default:
        return state;
    }
}

index.js

import { combineReducers } from 'redux';
import authReducer from './authReducer';
import errorReducer from './errorReducer';
import servicesReducer from './servicesReducer';
import dashboardReducer from './dashboardReducer';
// import dashboardReducer from './dashboardReducer';

export default combineReducers({
  auth: authReducer,
  errors: errorReducer,
  services: servicesReducer,
  dashboard: dashboardReducer,
});

0 个答案:

没有答案