reactjs - Redux Action 没有击中 Reducer [React]

Question

正如标题所说，我的 React 应用程序出现问题，我可以点击 Redux Action，但之后它不会点击 Reducer。我查看了我过去从事的一个项目，以及此处的几篇文章，但我不确定我的代码有什么问题阻止了 Action 访问 reducer。我已经粘贴了下面的代码，但如果我还可以提供任何其他内容，请告诉我。

index.js:

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App.jsx';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducers/usersRedcuers';
import './index.css';

const store = createStore(reducer);

ReactDom.render(
    <Provider store={store}>
      <App />
    </Provider>, document.getElementById('root')
)

App.jsx 组件:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Auth from '../modules/Auth';
import { login } from '../actions/usersActions';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      auth: null,
      token: '',
      password: '',
      username: '',
    }

    const {
      login,
    } = this.props;
  }



  loginHandler() {
    const { password, username } = this.state;
    const auth = Auth.isUserAuthenticated()
    const token = null;

    login(auth, token, password, username);   
  };

  render() {
    return (
      <div className="App">
        <div className="title">
          Recipe Box
        </div>
        <div className="form-inline login-form">
          <div className="form-group">
            <input
              className="form-control"
              onChange={e => this.setState({ username: e.target.value })}
              placeholder="Username"
            />
            <input
              className="form-control"
              onChange={e => this.setState({ password: e.target.value })}
              placeholder="Password"
              type="password"
            />
          </div>
          <button
            className="btn btn-success"
            onClick={() => this.loginHandler()}
            type="button"
          >
            Login
          </button>
        </div>
      </div>
    );
  }    
}

function mapDispatchToProps(dispatch) {
  console.log('dispatching:', dispatch)
  return bindActionCreators({login}, dispatch);
}

function mapStateToProps(state) {
  return { state }
}

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

Action 常量:

// AUTH
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

// USERS
export const ADD_USER = 'ADD_USER';
export const DELETE_USER = 'DELETE_USER';
export const UPDATE_USER = 'UPDATE_USER';

Action :

import {
  ADD_USER,
  DELETE_USER,
  LOGIN,
  LOGOUT,
  UPDATE_USER,
} from '../constants/constants';

export const login = (auth, token, password, username) => {
  const action = {
    type: LOGIN,
    auth,
    token,
    password,
    username,
  }
  console.log('login action:', action)
  return action;
}

reducer :

import {
  LOGIN,
  LOGOUT,
} from '../constants/constants';

const login = (action) => {
  console.log('hitting B')
  const { auth, token, password, username } = action;

  return {
    auth: auth,
    token: token,
    password: password,
    username: username,
  }
}

const authControl = (state = [], action) => {
  console.log('hitting C: ', action)
  let authControl = null;
  switch(action.type) {
    case LOGIN:
      authControl = [...state, login(action)]
      console.log('authControl:'. authControl);
      return authControl;
    default:
      console.log('hittibbng default', state)
      return state;
  }
}

export default authControl;

Answer 1

在 App.jsx 组件中，您应该使用作为 prop 传递给组件的操作，而不是直接调用操作。

登录处理程序应如下所示:

  loginHandler() {
    const { password, username } = this.state;
    const auth = Auth.isUserAuthenticated()
    const token = null;

    this.props.login(auth, token, password, username);   
  };