Я совершенно новичок в программировании React Redux и API ... нужна ваша помощь для моего кодирования
Я получил ошибку
src/containers/Dashboard/Main/Main.js: Duplicate declaration "Main"
51 | import { faTh, faListUl } from '@fortawesome/free-solid-svg-icons'
52 |
> 53 | function Main(props) {
| ^
54 | useEffect(()=>{
55 | props.onGetCampaign()
56 | },[])
Вот мой код:
Управление / SRC / index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import { detect } from "detect-browser"
import { createStore, applyMiddleware, compose, combineReducers } from "redux";
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import App from './App';
import Unsupport from './components/UI/Unsupport'
import * as serviceWorker from './serviceWorker';
import Campaign from './store/reducers/Campaign'
const composeEnhancers = process.env.NODE_ENV === "development" ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose : compose;
const rootReducer = combineReducers({
Campaign: Campaign,
});
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(thunk))
);
const browser = detect();
if (browser) {
console.log(browser.name);
}
// handle the case where we don't detect the browser
let app = null
switch (browser && browser.name) {
case 'chrome':
// case 'firefox':
app = <App />
break;
default: app = <Unsupport />
}
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
{app}
</BrowserRouter>
</Provider>, document.getElementById('root'));
serviceWorker.unregister();
Управление / SRC / контейнеры / Панель управления / Главная / Main.js
import React,{useEffect} from 'react'
import {connect} from 'react-redux'
import * as actions from '../../../store/actions/index'
import classes from './Main.module.scss'
import { NavLink, Switch, Route, withRouter } from 'react-router-dom'
import Main from '../../../components/Dashbord/Main/Campaing/Campaing'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTh, faListUl } from '@fortawesome/free-solid-svg-icons'
function Main(props) {
useEffect(()=>{
props.onGetCampaign()
},[])
return (
<div className={classes.Main}>
<h3 className={classes.Heading}>DASHBOARD</h3>
<div className={classes.NavPanel}>
<NavLink exact to="/" activeClassName={classes.active}>upcoming campaigns</NavLink>
<NavLink to="/past" activeClassName={classes.active}>past campaigns</NavLink>
</div>
</div>
)
}
const mapStateToProps=state=>{
return{
campaign:state.campaign.campaign
}
}
const mapDispatchToProps=dispatch=>{
return{
onGetCampaign:()=>dispatch(actions.getCampaign())
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Main)
Управление / SRC / магазин / действия / Campaign.js
import * as actions from './actionTypes'
import axios from '../../axios'
//get campaigns
export const initGetCampaign = () => {
return {
type: actions.GET_CAMPAIGN_INIT
}
}
export const failGetCampaign = () => {
return {
type: actions.GET_CAMPAIGN_FAIL
}
}
export const successGetCampaign = (data) => {
return {
type: actions.GET_CAMPAIGN_SUCCESS,
data
}
}
export const getCampaign = () => {
return dispatch => {
const token=localStorage.getItem('manage-token')
dispatch(initGetCampaign())
axios.get('campaigns/', {
headers: {
Authorization: `token ${token}`
}
}).then(res=>{
dispatch(successGetCampaign(res.data))
console.log(res.data);
}).catch(err=>{
dispatch(failGetCampaign())
console.log(err);
})
}
}
Управление / SRC / магазин / редукторы / Campaign.js
import * as actions from '../actions/actionTypes'
const initialState = {
loading: false,
message: "",
error: false,
success: false,
campaignList: null,
getCampaign: null
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case actions.GET_CAMPAIGN_INIT:
return {
...state,
loading: true,
error: false
}
case actions.GET_CAMPAIGN_FAIL:
return {
...state,
loading: false,
error: true
}
case actions.GET_CAMPAIGN_SUCCESS:
return {
...state,
loading: false,
campaignList: action.data,
error: false
}
default:
return state
}
}
export default reducer
Управление / SRC / магазин / действия / actionTypes.js
export const
GET_CAMPAIGN_FAIL="GET_CAMPAIGN_FAIL",
GET_CAMPAIGN_INIT="GET_CAMPAIGN_INIT",
GET_CAMPAIGN_SUCCESS="GET_CAMPAIGN_SUCCESS"
Управление / SRC / компоненты / Dashbord / Главная / кампания / Campaing.js
import React,{useEffect,useState} from 'react'
import classes from './Campaing.module.scss'
import axios from '../../../../axios'
function Main() {
// const [video, setVideo] = useState(null)
const [main, setMain] = useState(null)
useEffect(() => {
const token = localStorage.getItem('manage-token')
axios.get(`campaigns/`, {
headers: {
Authorization: `Token ${token}`
}
}).then(res => {
console.log(res.data.results);
setMain(res.data.results)
}).catch(err => {
console.log(err);
})
}, [])
return (
<div>
<h1 className={classes.Header}>
Dash Board
</h1>
{Main
?<ul className={classes.List}>
{main.map(res=>{
// console.log(res);
return(
<li key={res.id}>
<span>{res.heading}</span>
<p>{res.description}</p>
<p>{res.venue}</p>
<p>{res.start_time}</p>
<p>{res.end_time}</p>
<p>{res.sponsors}</p>
<p>{res.special_notes}</p>
<p>{res.company.name}</p>
<a href={res.campaign_url}>Show Campaign</a>
</li>
)
})}
</ul>
:null}
</div>
)
}
export default Main