Почему «Состояние» пусто после отправки действия? - PullRequest
Новая
       29

Почему «Состояние» пусто после отправки действия?

1 голос
/ 09 ноября 2019

Я работаю над входом в систему аутентификации. После того, как пользователь успешно вошел в систему, я хочу показать кнопку выхода из системы на основе значения токена в состоянии. Пользователь успешно вошел в систему, но на самом деле состояние пусто и не имеет значений, которые передаются с экспресс-сервера. Поэтому, если свойство токена состояния пусто, оно не отображает кнопку выхода из системы после входа в систему.

код API 

import axios from 'axios'

export default {
   user:{
       login:(credential) => axios.post('/api/auth',{credential}).then(res => res.data.user)
   }
}

код действия 

import {USER_LOGGED_IN} from '../types'
import api from '../api'

export const userLoggedIn = user => ({
    type: USER_LOGGED_IN,
    user
  });
export const login = (credential) =>(dispatch) => api.user.login(credential).then(user => dispatch(userLoggedIn(user)))

код типа 

export const USER_LOGGED_IN = 'USER_LOGGED_IN'

пользовательский редуктор 

import { USER_LOGGED_IN } from "../types";

export default function user(state ={}, action = {}) {
  switch (action.type) {
    case USER_LOGGED_IN:
      return action.user;
    default:
      return state;
  }
}

rootReducer 

import { combineReducers } from "redux";

import user from "./reducers/user";
// import books from "./reducers/books";

export default combineReducers({
  user:()=>({

  })

});

Домашняя страница 

import React from 'react'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'

import { Link } from  'react-router-dom'

 function HomePage({isAuthenticated}) {
  return (
    <div>
      <h1>Home Page</h1>
      { isAuthenticated ?    <button>Logout</button> : <Link to ="/login">Login</Link>}
    </div>
  )
}
HomePage.propTypes ={
  isAuthenticated:PropTypes.bool.isRequired
}
function mapStateToProps(state){
  console.log(state.user.token); // this shows undefined

  return{
    isAuthenticated:!!state.user.token
  }


}

export default connect(mapStateToProps)(HomePage)

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import 'semantic-ui-css/semantic.min.css'
import {createStore,applyMiddleware} from 'redux'
import {Provider} from 'react-redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from  'redux-devtools-extension'
import App from './App';
import * as serviceWorker from './serviceWorker';
import rootReducer from './rootReducer'

const store = createStore(rootReducer,composeWithDevTools(applyMiddleware(thunk)))
ReactDOM.render(<BrowserRouter><Provider store={store}><App /></Provider></BrowserRouter>, document.getElementById('root'));
serviceWorker.unregister();

Ответы [ 2 ]

1 голос
/ 09 ноября 2019

На самом деле вы не предоставляете свой пользовательский редуктор в комбайновых редукторах, вы можете сделать это как 

import { combineReducers } from "redux";

import user from "./reducers/user";

export default combineReducers({
 user
 })
});

Надеюсь, это поможет

1 голос
/ 09 ноября 2019

обновить файл rootreduer до 

import { combineReducers } from "redux";

import user from "./reducers/user";
// import books from "./reducers/books";

export default combineReducers({
  user
});
...