我将使用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,
});