Redux 状态未在 Redux DevTool 中更新

Posted 2023-02-19

【中文标题】Redux 状态未在 Redux DevTool 中更新

【英文标题】：Redux State not updating in the Redux DevTool

【发布时间】：2018-06-29 07:14:11

【问题描述】：

当我单击一个按钮时，它会调度一个用于登录用户并返回用户数据的函数。但是 Redux 商店似乎在调度后没有更新。当我检查 Redux devtool 时，它显示操作正在使用其有效负载进行适当的分派，但状态仍保持为初始状态，在每个分派的操作后都不会更新。

下图显示了 redux devtool 的操作和状态。 Dispatched actions

State display initial state

不知道我做错了什么，我的代码如下。

userInitialState.js

export default 
  user: ,
  error: null,
  loading: false
;

userLoginAction.js

import axios from 'axios';
import * as types from './actionTypes';

export const signInUserSuccess = payload => (
  type: types.SIGNIN_USER_SUCCESS,
  payload
);

export const signingInUser = () => (
  type: types.SIGNING_IN_USER
);

export const signInUserFailure = () => (
  type: types.SIGNIN_USER_FAILURE
);

export const userSignIn = (data) => 
  const url = 'https://eventcity.herokuapp.com/api/v1/users/login';
  return (dispatch) => 
    dispatch(signingInUser());
    return axios(
      method: 'post',
      url,
      data
    )
      .then((response) => 
        const user = response.data;
        dispatch(signInUserSuccess(user));
      )
      .catch(() => 
        dispatch(signInUserFailure());
      );
  ;
;

userLoginReducer.js

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

const userReducer = (state = userInitialState, action = ) => 
  switch (action.types) 
    case types.SIGNING_IN_USER:
      return 
        ...state,
        user: ,
        error: null,
        loading: true
      ;
    case types.SIGNIN_USER_FAILURE:
      return 
        ...state,
        user: ,
        error:  message: 'Error loading data from the API' ,
        loading: false
      ;
    case types.SIGNIN_USER_SUCCESS:
      return 
        ...state,
        user: action.payload,
        error: null,
        loading: false
      ;
    default:
      return state;
  
;

export default userReducer;

rootReducer.js

import  combineReducers  from 'redux';
import userReducer from './userReducer';

const rootReducer = combineReducers(
  userReducer
);

export default rootReducer;

configureStore.js

import  createStore, applyMiddleware  from 'redux';
import thunk from 'redux-thunk';
import  composeWithDevTools  from 'redux-devtools-extension';
import rootReducer from '../reducer/rootReducer';

const configureStore = () => createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));

export default configureStore;

SignInModal.js

import React,  Component  from 'react';

class SignInModal extends Component 
  state = 
    username: '',
    password: ''
  ;
  componentDidMount() 
    this.props.userSignIn();
  
  onUsernameChange = e => 
    const username = e.target.value;
    this.setState(() => (
      username
    ));
  ;
  onPasswordChange = e => 
    const password = e.target.value;
    this.setState(() => (
      password
    ));
  ;
  onSubmitForm = e => 
    e.preventDefault();
    const user = 
      username: this.state.username,
      password: this.state.password
    ;
    this.props.userSignIn(user);
  ;

  render() 
    console.log(this.props.user)
    return (
      <div>
        <div
          className="modal fade"
          id="exampleModalCenter"
          tabIndex="-1"
          role="dialog"
          aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true"
        >
          <div className="modal-dialog" role="document">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title" id="exampleModalLongTitle">
                  Sign In Form
                </h5>
                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div className="modal-body">
                <form onSubmit=this.onSubmitForm id="signin">
                  <div className="form-group">
                    <label htmlFor="username">Username or Email</label>
                    <input
                      type="text"
                      className="form-control"
                      name="username"
                      placeholder="Username or email"
                      value=this.state.username
                      onChange=this.onUsernameChange
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="password">Password</label>
                    <input
                      type="password"
                      className="form-control"
                      placeholder="Password"
                      name="password"
                      value=this.state.password
                      onChange=this.onPasswordChange
                    />
                  </div>
                </form>
                <div className="modal-footer">
                  <button type="button" className="btn btn-secondary" data-dismiss="modal">
                    Close
                  </button>
                  <button type="submit" className="btn btn-primary" form="signin">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  


export default SignInModal;

SignInModalContainer

import  connect  from 'react-redux';
import  userSignIn  from '../actions/userLoginAction';
import SignInModal from '../components/SignInModal';

const mapStateToProps = state => (
  user: state.userReducer
);
const mapDispatchToProps = dispatch => (
  userSignIn: data => dispatch(userSignIn(data))
);

export default connect(mapStateToProps, mapDispatchToProps)(SignInModal);

【参考方案1】：

我发现了问题。我在switch 语句中使用了action.types。而不是使用switch(action.type)。