React/Redux ReferenceError: Cannot access 'Action' before initialization - reactjs

Question

I have made a React site using redux which is successfully working on one component.
This is mapped to props and pulls data from redux using the fetchposts.
This looks like this.
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { fetchPosts, fetchItins } from "../../../actions/postActions";
import TravelAlerts from "./TravelAlerts//travelAlert";
import IntelligenceAlerts from "./IntelligenceAlerts/IntelligenceAlert";
import AllAlerts from "./AllAlerts/AllAlerts";
import "./Alerts.css";
class Alerts extends Component {
state = {
showAllAlerts: true,
showAllIntelligenceAlerts: false,
showAllTravellers: false,
currentPage: 1,
alertsPerPage: 20,
allAlerts: [],
dataFetched: false,
};
//usiing redux action which is mapped to this compoenent
componentDidMount() {
this.props.fetchPosts();
}
render() {
return (
<div>
<hr />
<div>
{this.state.showAllAlerts ? (
<>
<AllAlerts all={this.Sorter()} />
</>
) : (
<></>
)}
</div>
<>
{this.state.showAllTravellers ? (
<>
<></>
<TravelAlerts alerts={this.props.posts.travelAlerts} />
</>
) : (
<></>
)}
</>
<>
{this.state.showAllIntelligenceAlerts ? (
<>
<IntelligenceAlerts
alerts={this.props.posts.intelligenceAlerts}
/>
</>
) : (
<></>
)}
</>
</div>
);
}
}
Alerts.propTypes = {
fetchPosts: PropTypes.func.isRequired,
posts: PropTypes.object.isRequired,
// newPost: PropTypes.object
};
const mapStateToProps = (state) => ({
posts: state.posts.items,
// newPost: state.posts.item
});
export default connect(mapStateToProps, { fetchPosts })(Alerts);
This works fine and does successfully get information. However when doing this (Which is essentially exactly the same it throws this error).
ReferenceError: Cannot access 'fetchItins' before initialization
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { fetchPosts, fetchItins } from "../../../actions/postActions";
import ItineraryNew from "./ItineraryNew/ItineraryNew";
import ItineraryAll from "./ItineraryAll/ItineraryAll";
import ItineraryArrivals from "./ItineraryArrivals/ItineraryArrivals";
import ItineraryDepatures from "./ItineraryDepatures/ItineraryDepatures";
class Itinerary extends Component {
state = {
showAllItins: true,
showAllItinsArrivals: false,
showAllItinsDepatures: false,
showAllItinsNew: false,
currentPage: 1,
alertsPerPage: 20,
};
//usiing redux action which is mapped to this compoenent
componentDidMount() {
this.props.fetchItins();
}
//navigation helper
DisableAlerts() {
this.setState({
showAllItins: false,
showAllItinsArrivals: false,
showAllItinsDepatures: false,
showAllItinsNew: false,
});
}
//pagination change page
handleClick(number) {
this.setState({
currentPage: number,
});
}
ToggleItin(name) {
this.DisableAlerts();
if (name === "All") {
this.setState({ showAllItins: true });
} else if (name === "Arrivals") {
this.setState({ showAllItinsArrivals: true });
} else if (name === "Depatures") {
this.setState({ showAllItinsDepatures: true });
} else if (name === "New") {
this.setState({ showAllItinsNew: true });
} else {
this.setState({ showAllItins: true });
}
}
render() {
{
console.log(this.props.posts);
}
return (
<div>
<button style={{ width: "18%" }} onClick={() => this.ToggleItin("All")}>
ALL Travel
</button>
<button
style={{ width: "18%" }}
onClick={() => this.ToggleItin("Arrivals")}
>
Arrivals
</button>
<button
style={{ width: "18%" }}
onClick={() => this.ToggleItin("Depatures")}
>
Depatures
</button>
<button style={{ width: "18%" }} onClick={() => this.ToggleItin("New")}>
New
</button>
<br />
<hr />
<>
{this.state.showAllItins ? (
<>
<ItineraryAll itinerary={this.props.posts} />
</>
) : (
<></>
)}
</>
<>
{this.state.showAllItinsArrivals ? (
<>
<ItineraryArrivals itinerary={this.props.posts} />
</>
) : (
<></>
)}
</>
<>
{this.state.showAllItinsDepatures ? (
<>
<ItineraryDepatures itinerary={this.props.posts} />
</>
) : (
<></>
)}
</>
<>
{this.state.showAllItinsNew ? (
<>
<ItineraryNew itinerary={this.props.posts} />
</>
) : (
<></>
)}
</>
</div>
);
}
}
Itinerary.propTypes = {
fetchItins: PropTypes.func.isRequired,
posts: PropTypes.array.isRequired,
// newPost: PropTypes.object
};
const mapStateToProps = (state) => ({
posts: state.itin.itins,
// newPost: state.posts.item
});
export default connect(mapStateToProps, { fetchItins })(Itinerary);
So I thought I would try to completely replace the itinerary component with all the initial component so that the data is exactly the same and just change its name to itinerary(as first component worked perfectly).
However when I did this it errored
ReferenceError: Cannot access 'fetchPosts' before initialization
Which was interesting to me as it works fine within the other component and now the code is essentially exactly the same.
Below is the store/actions and reducer
reducer
import { FETCH_POSTS, NEW_POST, FETCH_ITINS } from "../actions/types";
const initialState = {
items: {},
item: {},
itins: {},
travelAlerts: [],
intelligenceAlerts: [],
};
export default function (state = initialState, action) {
switch (action.type) {
case FETCH_POSTS:
return {
...state,
items: action.payload,
travelAlerts: action.payload.travelAlerts,
intelligenceAlerts: action.payload.intelligenceAlerts,
};
// case NEW_POST:
// return {
// ...state,
// item: action.payload,
// };
case FETCH_ITINS:
return {
...state,
itins: action.payload,
};
default:
return state;
}
}
store
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
export default store;
reducer
import Itinerary from "../components/SideNav/Itinerary/Itinerary";
import { FETCH_POSTS, NEW_POST, FETCH_ITINS } from "./types";
export const fetchPosts = () => (dispatch) => {
fetch(
"a url im using"
)
.then((res) => res.json())
.then((posts) =>
dispatch({
type: FETCH_POSTS,
payload: posts,
})
);
};
export const fetchItins = () => (dispatch) => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((itin) =>
dispatch({
type: FETCH_ITINS,
payload: itin,
})
);
};
export const createPost = (postData) => (dispatch) => {
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify(postData),
})
.then((res) => res.json())
.then((post) =>
dispatch({
type: NEW_POST,
payload: post,
})
);
};
I would really appreciate any help on this as I am at a loss.