Запрос на получение Axios возвращает пользователя: null, используя избыточные действия, чтобы вызвать бэкэнд?

Question

Все мои почтовые запросы Axios работают нормально. Также запрос get к почтальону работает нормально, но когда я делаю запрос get, используя axios, он возвращает user: null из промежуточного программного обеспечения auth из запроса app.get.

вот мои мои файлы:

user.actions file:-

export function auth() {
    const request = 
    axios.get(`http://localhost:3001${USER_SERVER}/auth`)
        .then(response => response.data)
    return {
        type: AUTH_USER,
        payload: request
    }
}

это запрос в файле моего сервера:

app.get('/api/users/auth', auth, (req, res) => {
    res.status(200).json({
        isAdmin: req.user.role === 0 ? false : true,
        isAuth: true,
        email: req.user.email,
        name: req.user.name,
        lastname: req.user.lastname,
        role: req.user.role,
        cart: req.user.cart,
        history: req.user.history,
        contactnumber: req.user.contactnumber,
        address: req.user.address
    })
})

Вот мое промежуточное программное обеспечение: -

const { User } = require('../models/user')

let auth = (req, res, next) => {
    let token = req.cookies.x_auth
    User.findByToken(token, (err, user) => {
        if (err)
            throw err
        if (!user)
            return res.json({
                user: user,
                isAuth: false,
                error: true
            })
        console.log(user)
        req.token = token
        req.user = user
        next()
    })
}

module.exports = { auth }

Вот редуктор из моего файла редуктора:

case AUTH_USER:
            return { ...state, userData: action.payload } 

вот мой файл auth.js, где я делаю запрос авторизации после входа в систему из браузера:

class AuthCheck extends Component {
        state = {
            loading: false
        }

        componentDidMount() {
            this.props.dispatch(auth()).then(Response => {
                console.log(this.props.user)
                let user = this.props.user.userData
                console.log(user)
            })
        }
        render() {
            if (this.state.loading) {
                return (
                    <div className='main_loader'>
                        <Loader size='big' active />
                    </div>
                )
            }
            return (
                <ComposedClass {...this.props} user={this.props.user} />
            )
        }
    }

    function mapStateToProps(state) {
        return {
            user: state.user
        }
    }
    return connect(mapStateToProps)(AuthCheck)
}

Файл console.log из файла auth.js возвращает:

{пользователь: null, isAuth: false, ошибка: true}

даже после того, как я получу loginSuccess = true при входе в систему с зарегистрированным пользователем.

В чем проблема?

Вот мой файл создания магазина в клиентском файле index.js

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);


ReactDOM.render(
    <Provider store={createStoreWithMiddleware(Reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())}>
        <BrowserRouter>
            <Routes />
        </BrowserRouter>
    </Provider>

    , document.getElementById('root'));

Вот мой файл редуктора комбайна:

import { combineReducers } from 'redux'
import user from './user_reducer'

const rootReducer = combineReducers({
    user
})

export default rootReducer

Answer 1

Можете ли вы показать свои функции combReducers и createStore?Кроме того, ваша функция authAction кажется немного отключенной.Попробуйте вместо этого:

export const auth = () => async dispatch {
    const response = await axios.get(`http://localhost:3001${USER_SERVER}/auth`);            
    dispatch({
        type: AUTH_USER,
        payload: response.data
    })
}

Оберните его в try-catch для обработки сетевых ошибок.

Answer 2

Проблема в вашем коде заключается в том, что в вашем файле редуктора вы устанавливаете action.payload для userData, но в вашем компоненте вы обращаетесь как state.user, что неправильно. Это должно быть state.userData

So Change

   function mapStateToProps(state) {
       return {
          user: state.user
       }
   }

К

  function mapStateToProps(state) {
       return {
           user: state.userData
       }
  }

Итак, внутри render сделать console.log (this.props.user); вы получите данные пользователя