Javascript 反应组件不'；t在Redux存储更改后更新

这些是我的类和组件：

App.js：

import { connect } from "react-redux";
import Main from "./components/main/Main";
import * as actions from "./redux/actions";
import { bindActionCreators } from "redux";
import { withRouter } from "react-router";

function mapStateToProps(state) {
  console.log(state);

  return {
    // naming must be exact same as function in reducer
    auth: state.auth,
    errorBag: state.errorBag
  };
}
function mapDispatchProps(dispatch) {
  return bindActionCreators(actions, dispatch);
}
const App = withRouter(connect(mapStateToProps, mapDispatchProps)(Main));
export default App;

Main.js：

import React, { Component } from "react";
import { Redirect } from "react-router";
import { Route } from "react-router-dom";
import Login from "./../login/Login";
import Home from "./../home/Home";

class Main extends Component {

  render() {

    return (
      <div>
        <Route
          path="/login"
          render={param => {
            return <Login {...this.props} {...param} />;
          }}
        />

        {!this.auth ? <Redirect to="/login" /> : <Home />}
      </div>
    );
  }
}

export default Main;

actions.js：

import axios from "axios";

export function startSignUp(signUpData) {
  return dispatch => {

    return axios
      .post("http://localhost:8000/api/v1/user/sign-up/", signUpData)
      .then(res => {
        console.log(res);
        authenticate(res.data.shaba);
      })
      .catch(error => {
        console.log(error.data);
      });
  };
}
export function addErrorIntoBag(area, error) {
  return {
    type: "ADD_ERROR",
    area,
    error
  };
}


function authenticate(token) {
  return {
    type: "AUTHENTICATE",
    token
  };
}

Login.js：

import React, { Component } from "react";
import "./login.css";
import InlineAlert from "./../alerts/InlineAlert";

class Login extends Component {
  constructor(props) {
    super(props);
  }
  getAreaName = () => "LOGIN";
  submitHandler = event => {
    event.preventDefault();
    const email = event.target.elements.email.value;
    const code = event.target.elements.code.value;
    const password = event.target.elements.password.value;
    if (password === "" || code === "" || email === "") {
      this.props.addErrorIntoBag(this.getAreaName(), "fill the form please");

      return;
    }
    const data = {
      email: email,
      password: password,
      national_code: code
    };
    this.props.startSignUp(data);
    this.forceUpdate();
  };
  render() {
    return (
      <div id="parent" onSubmit={this.submitHandler}>
        <form id="form_login">
          <h2>Login</h2>
          <br />
          <div className="form-group">
            <label forhtml="exampleInputEmail1">National code</label>
            <input
              key="code"
              type="text"
              className="form-control"
              id="exampleInputEmail1"
              aria-describedby="emailHelp"
              name="code"
            ></input>
          </div>
          <div className="form-group">
            <label forhtml="exampleInputPassword1">Email</label>
            <input
              type="email"
              className="form-control"
              id="email"
              name="email"
              key="email"
            ></input>
          </div>
          <div className="form-group">
            <label forhtml="exampleInputPassword1">Password</label>
            <input
              type="password"
              className="form-control"
              id="name"
              name="password"
              key="password"
            ></input>
          </div>
          <div className="form-group form-check"></div>
          <button type="submit" className="btn btn-light">
            SIGN-UP
          </button>
        </form>
        {/* drill down checking I guess you forgot to call 
dispatch
 in 
startSignUp
 function. It is not enough just to return from 
authenticate
 the object as you did with 
{ type: "AUTHENTICATE", token }
 but you need to pass to 
dispatch
 also. In this way you are triggering a state change.


From the documentation of 
dispatch(action):



  Dispatches an action. This is the only way to trigger a state change.



Maybe you could try to do somehow the following:


export function startSignUp(signUpData) {
  return dispatch => {
    return axios
      .post("http://localhost:8000/api/v1/user/sign-up/", signUpData)
      .then(res => {
        console.log(res);
        // missing dispatch added
        dispatch(authenticate(res.data.shaba));
      })
      .catch(error => {
        console.log(error.data);
      });
  };
}


import React，{Component}来自“React”；
导入“/login.css”；
从“/./警报/InlineAlert”导入InlineAlert；
类登录扩展组件{
建造师（道具）{
超级（道具）；
}
getAreaName=（）=>“登录”；
submitHandler=事件=>{
event.preventDefault（）；
const email=event.target.elements.email.value；
常量代码=event.target.elements.code.value；
const password=event.target.elements.password.value；
如果（密码==“”| |代码==“”| |电子邮件==“”）{
this.props.addErrorIntoBag（this.getAreaName（），“请填写表单”）；
返回；
}
常数数据={
电邮:电邮,，
密码：密码，
国家代码：代码
};
此.props.startSignUp（数据）；
这个.forceUpdate（）；
};
render（）{
返回(
登录


国家代码
电子邮件
密码
报名
{/*深入检查我想你忘了调用
startSignUp
函数中的
dispatch
。仅仅从
authenticate
返回对象是不够的，就像你使用
{type:“authenticate”，token}一样
但您还需要传递到
调度
。这样您就触发了状态更改

根据以下文件：

分派操作。这是触发状态更改的唯一方法

也许你可以试着做以下几点：

dispatch({
  type: "AUTHENTICATE",
  token
});

因此，您可以考虑在状态更改结束时按以下方式调用like：

我希望这有帮助！
谢谢，这是我的错误之一，但我的主要问题是
errorBagReducer
函数，我调用它，它会更改存储，但登录组件不会触发。
dispatch({
  type: "AUTHENTICATE",
  token
});