Redux Dev Tool не отражает изменения состояния и действий
Расширение Redux dev tools, показывающее только начальное состояние и действие init, но не отражающее отправленные действия и изменения состояния, выполненные с помощью кода. Принимая во внимание, что если я использую диспетчер в расширении тогда, это показывает действие и изменения состояния.
Я потратил много времени на это, но все закончилось напрасно.
Это мой создатель действий.
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);