0

Redux 开发工具扩展仅显示初始状态和初始化操作，而不反映通过代码完成的分派操作和状态更改。而如果我在扩展中使用调度程序，那么它会显示操作和状态更改。

我为此花了很长时间，但徒劳无功。

这是我的动作创造者。

import * as types from './actionTypes';
import UserApi from '../api/userApi';

export function loginUserSuccess(data) {
  return {type: types.LOGIN_USER_SUCCESS, data};
}

export function loginUserFailure(err) {
  return {type: types.LOGIN_USER_FAILURE, err};
}

export function loginUser(credentials, cb) {
  return function(dispatch) {
    UserApi.loginUser(credentials)
        .then(response => {
            dispatch(loginUserSuccess(response.data));
            cb();
        })
        .catch(err => {
            dispatch(loginUserFailure(err));
        });
     };
 }

我的减速机。

import * as types from '../actions/actionTypes';
import initialState from './initialState';

export default function userReducer(state = initialState.User, action) 
{
 switch (action.type) {
    case types.LOGIN_USER_SUCCESS: 
        {
            return Object.assign({},state,{isAuthenticated: true});
        }

    default: 
        return state;
 }
}

存储配置。

import {
 createStore,
 applyMiddleware,
 compose
} from 'redux';
import rootReducer from '../reducers';
import reduxtImmutableStateInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
                    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({latency: 0 }) : compose;
export default function configureStore(initialState) {
  return createStore(
   rootReducer,
   initialState,
   composeEnhancers(
    applyMiddleware(thunk, reduxtImmutableStateInvariant())
   )
  );
}

这是最初调度操作的地方。

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {
  Redirect
} from 'react-router-dom';
import * as userActions from '../../actions/userActions';
import PropTypes from 'prop-types';

class Login extends React.Component {
 constructor(props, context) {
  super(props, context);
  this.state = {
   redirectToReferrer: this.props.user.isAuthenticated
  };
  this.login = this.login.bind(this);
 }

 login() {
  this.props.actions.loginUser({username: "a.p.dhanushu@gmail.com",password: "dhanushu"}, () =>{this.setState({redirectToReferrer : true});});}

 render() {
   const { from } = this.props.location.state || { from: { pathname: '/' } };
 const {redirectToReferrer} = this.state;
 let isAuth = this.props.user.isAuthenticated;

   if (redirectToReferrer) {
    return (
     <Redirect to={from}/>  
    );
  }

 return (
    <div>
      <p>You must log in to view the page at {from.pathname} and you are {isAuth ? "authenticated" : "not authenticated"}</p>
      <button onClick={this.login}>Log in</button>
    </div>
  );
 }
}

Login.propTypes = {
  actions: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
 return {
 user: state.user
 };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(userActions, dispatch)
  };
 }

 export default connect(mapStateToProps, mapDispatchToProps)(Login);
4

0 回答 0