Function doesn't enter in the dispatch in React / Redux - reactjs

Question

I'm working on a personal React project with Redux and I've an issue. All my redux functions are working well except one. I want to load all the requests into the redux. In requestAction.js, I have the first console.log but not the second from the return function(dispatch). Have you any idea why ?
Thank you in advance =)
Here is my code :
import React, {useState, useEffect} from "react"
import {connect} from "react-redux"
import {getAllRequests} from "../../api/requests"
import {loadAllRequests} from "../../actions/request/requestAction"
import {convertDate} from "../../utils/utils"
import Header from "../headers/header"
import HeaderPages from "../headers/headerPages"
import Footer from "../footer"
import AdminMenu from "../../components/adminMenu"
const AdminRequests = (props) => {
const headerTitle ="Administration"
const headerBreadcrumbs = [{value: "Accueil", link:"/"},{value: "Administration", link:"/admin"},{value: "Commandes", link:null}]
const [displayedRequests, setDisplayedRequests] = useState([])
useEffect(() => {
loadDatas()
}, [])
useEffect(() => {
loadDisplayedRequests(props.requests.list)
}, [props.requests])
const loadDatas = () => {
getAllRequests()
.then(requestsDB => {
loadAllRequests(requestsDB) //My redux function
})
}
//Construction de la liste des commandes à afficher
const loadDisplayedRequests = (requests) => {
requests.map((requestItem) => {
setDisplayedRequests(displayedRequests => [...displayedRequests,
<article key={requestItem.id} className="profile-user-request-item">
<section className="request-item-header">
<p>N°{requestItem.request_number}</p>
<p>du {convertDate(requestItem.request_date)}</p>
<p>Statut : {requestItem.preparation_status}</p>
</section>
<section className="request-item-resume">
<p>Total</p>
<p>{requestItem.total_amount} € TCC</p>
</section>
</article>])
})
}
const showDisplayedRequests = () => {
return(
<section>
{displayedRequests}
</section>
)
}
return (
<div className="root">
<Header />
<HeaderPages headerTitle={headerTitle} headerBreadcrumbs={headerBreadcrumbs}/>
<section className="admin-container">
<AdminMenu />
<section className="admin-content">
<h4>Gestion des commandes</h4>
{showDisplayedRequests()}
</section>
</section>
<Footer />
</div>
)
}
const mapStateToProps = (store) => {
return {
requests: store.requests
}
}
const mapDispatchToProps = {
loadAllRequests
}
export default connect(mapStateToProps, mapDispatchToProps)(AdminRequests)
requestAction.js
import {LOAD_ALL_REQUESTS} from "./action-type"
export const loadAllRequests = (requests) => {
console.log("requests action = ", requests) //Displayed
return function(dispatch){
console.log("dispatch") //Not displayed
dispatch({
type: LOAD_ALL_REQUESTS,
payload: requests
})
}
requestReducer.js
import { LOAD_ALL_REQUESTS } from "../actions/request/action-type"
const initialState = {
list: []
}
export default function RequestReducer(state = initialState, action) {
switch(action.type){
case LOAD_ALL_REQUESTS :
return {list: action.payload}
break
default :
return state
break
}
}
index.js
import {combineReducers } from "redux"
import UserReducer from "./userReducer"
import ProductsReducer from "./productsReducer"
import RequestReducer from "./requestReducer"
const rootReducer = combineReducers({
user: UserReducer,
products: ProductsReducer,
requests: RequestReducer
})
export default rootReducer

Answer 1

The problem at heart is that you don't dispatch. You need to
const dispatch = useDispatch()
useEffect(() => {
dispatch(loadDisplayedRequests(props.requests.list))
// instead of
// loadDisplayedRequests(props.requests.list)
}, [props.requests])
Adding to that: What you have written there is not an action creator, but a thunk. It will only work if you have the thunk middleware enabled - and even then, for this simple use case it just does nothing extra that you need.
As a normal action creator, it would look like this:
import {LOAD_ALL_REQUESTS} from "./action-type"
export const loadAllRequests = (requests) => {
return {
type: LOAD_ALL_REQUESTS,
payload: requests
}
}
Generally, I want to make you aware that you are writing a very old style of Redux here and might have been following an outdated tutorial. Modern Redux does not have string action type constants, switch case reducers, action creators or connect any more.
For a quick look at modern Redux, take a look at https://redux.js.org/tutorials/fundamentals/part-8-modern-redux and for a longer tutorial, read https://redux.js.org/tutorials/essentials/part-1-overview-concepts