Output of dispatch is undefined - reactjs

Question

I have a login page (login.js), when the form is submited data gets sent using redux , dispatch but when i console.log user selector it shows undefined and i don't really know why. The ajax call work and resp.data.json show the data in saga.js.
Init state is defined so even before the ajax call i should be able to access to isLoading and errorMessage which i cannot even have access.
login.js
import React, { Component, useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useParallax } from "react-scroll-parallax";
import { useTranslation } from "react-i18next";
import axios from "axios";
import "./Login.css";
import logoWhite from './img/logo-white.png';
import svgLogo from './img/log.png';
import { Helmet } from 'react-helmet';
import { useDispatch, useSelector } from 'react-redux';
import userActions from './redux/auth/actions';
const {
postToApi,
} = userActions;
function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const user = useSelector(
state => state.user
);
const dispatch = useDispatch();
const handleLogin = e => {
e.preventDefault();
var data = {};
data.email = email;
data.password = password;
dispatch(postToApi(data));
console.log(user); // Undefined
};
const { t, i18n } = useTranslation();
return (
<div className="login-page">
<Helmet>
<title>Espace Client - Développement de site internet à Antibes, Cannes, Nice</title>
</Helmet>
<div className="container">
<div className="forms-container">
<div className="signin-signup">
<form onSubmit={handleLogin} autoComplete="off" className="sign-in-form">
<h2 className="title">Identifiez-vous</h2>
<div className="input-field">
<i className="fas fa-user"></i>
<input type="text" value={email} onInput={e => setEmail(e.target.value)} placeholder="Adresse e-mail" autoComplete="off" />
</div>
<div className="input-field">
<i className="fas fa-lock"></i>
<input type="password" value={password} onInput={e => setPassword(e.target.value)} placeholder="Mot de passe" autoComplete="new-password" />
</div>
<button type="submit" className="btn solid">CONTINUER</button>
</form>
</div>
</div>
<div className="panels-container">
<div className="panel left-panel">
<div className="content">
<Link to="/"><img src={logoWhite} className="logo" alt="Création de sites Web vitrine" /></Link>
<h3 className="text-white">ESPACE CLIENT</h3>
<p>
Vous pourrez suivre vos factures, modifier vos informations personelles, trouver de l'aide...
</p>
</div>
<img src={svgLogo} className="image" alt="Création de sites Web vitrine" />
</div>
</div>
</div>
</div>
)
}
export default Login;
actions.js
const actions = {
POST_TO_API: 'POST_TO_API',
POST_TO_API_SUCCESS: 'POST_TO_API_SUCCESS',
POST_TO_API_ERROR: 'POST_TO_API_ERROR',
postToApi: data => {
return {
type: actions.POST_TO_API,
payload: { data },
};
},
postToApiSuccess: data => ({
type: actions.POST_TO_API_SUCCESS,
payload: { data },
}),
postToApiError: error => ({
type: actions.POST_TO_API_ERROR,
payload: { error },
}),
};
export default actions;
reducer.js
import actions from './actions';
const initState = {
isLoading: false,
errorMessage: false,
data: []
};
export default function reducer(
state = initState,
{ type, payload }
) {
switch (type) {
case actions.POST_TO_API:
return {
...state,
isLoading: true,
errorMessage: false
};
case actions.POST_TO_API_SUCCESS:
return {
...state,
isLoading: false,
data: payload.data,
errorMessage: false
};
case actions.POST_TO_API_ERROR:
return {
...state,
isLoading: false,
errorMessage: 'There is a problem'
};
default:
return state;
}
}
saga.js
import { all, takeEvery, put, call } from 'redux-saga/effects';
import actions from './actions';
import axios from "axios";
function run(data){
var actionUrl = '/pages/login';
return axios ({
method: 'POST',
url: 'http://xzy/api' + actionUrl,
data: {
data
},
headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", "Accept": "application/json" }
});
}
function* postToApi(payload) {
try {
const resp = yield call(run, payload.payload.data)
console.log(resp.data.json); // Data shown in the log
yield put(actions.postToApiSuccess(resp.data.json));
} catch (error) {
yield put(actions.postToApiError(error));
}
}
export default function* rootSaga() {
yield all([
takeEvery(actions.POST_TO_API, postToApi),
]);
}
App.js
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './redux/store';
import Routes from './router';
import AppProvider from './AppProvider';
const App = () => (
<Provider store={store}>
<AppProvider>
<>
<Routes />
</>
</AppProvider>
</Provider>
);
export default App;
AppProvider.js
import React from 'react';
import { ConfigProvider } from 'antd';
export default function AppProvider({ children }) {
return (
<ConfigProvider locale="fr">
{children}
</ConfigProvider>
);
}
./redux/store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './root-reducer';
import rootSaga from './root-saga';
const sagaMiddleware = createSagaMiddleware();
const middlewares = [thunk, sagaMiddleware];
const bindMiddleware = middleware => {
if (process.env.NODE_ENV !== 'production') {
const { composeWithDevTools } = require('redux-devtools-extension');
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
};
const store = createStore(rootReducer, bindMiddleware(middlewares));
sagaMiddleware.run(rootSaga);
export { store };
root-saga.js
import { all } from 'redux-saga/effects';
import authSagas from './auth/saga';
export default function* rootSaga(getState) {
yield all([
authSagas()
]);
}
root-reducer.js
import { combineReducers } from 'redux';
import App from './app/reducer';
import Auth from './auth/reducer';
export default combineReducers({
Auth,
App
});