Question

当我点击一个按钮时，它会调度一个用于登录用户并返回用户数据的功能。但是在发送之后，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);

Answer 1

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

Redux状态不在Redux DevTool中更新

1 个答案: