Неопределенная функция в React Router + Redux

Question

В данный момент пишу приложение в стеке React + Redux. Во время разработки я столкнулся с проблемой, когда в компоненте React функция Redux работает нормально и в индексе. js бросая эту функцию Redux неопределенно.

Что я должен сделать sh, это сделать сохранить пользовательский вход между перезагрузкой веб-страницы. Поэтому, когда страницы перезагружаются, функция componentDidMonut в index. js проверяет, есть ли токен в localstorage, затем отправляет один вызов API, чтобы проверить, не истек ли токен JWT. И если что-то не так, вызовите редукционную функцию signIn () для повторного отображения приложения.

В компоненте «Вход в систему» ​​вход в систему работает и перенаправляется после входа в систему, к сожалению, в индексе. js Реакция сброса:

.

После проверки в консоли эта функция просто не определена, и я не знаю почему.

С нетерпением жду указания ошибок, которые я сделал. Заранее спасибо Код ниже:

action / index. js:

export const signIn = () => {
  return {
    type: "SIGN_IN"
  };
};

export const signOut = () => {
  return {
    type: "SIGN_OUT"
  };
};

Редукторы / authReducers:

const INITIAL_STATE = {
  isSignedIn: null
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "SIGN_IN":
      return { ...state, isSignedIn: true };
    case "SIGN_OUT":
      return { ...state, isSignedIn: false };
    default:
      return state;
  }
};

Логин. js:

import React from "react";
import {
  Button,
  Container,
  Form,
  Grid,
  Header,
  Message,
  Segment
} from "semantic-ui-react";
import { connect } from "react-redux";
import { signIn, signOut } from "../actions";
import api from "../api/api";

class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isSignedIn: null,
      email: "",
      password: "",
      errorMessage: ""
    };
    this.errorMessageRef = React.createRef();
  }

  handleLogin = async () => {
    try {
      const response = await api.login(this.state.email, this.state.password);
      if (response.status === 200) {
        localStorage.setItem("token", response.data.token);
        this.props.signIn();
        this.props.history.push("/flat");
      }
    } catch (error) {
      this.errorMessageRef.current.hidden = false;
      this.setState({ ...this.state, errorMessage: `${error}` });
      this.props.signOut();
    }
  };

  render() {
    return (
      <Container>
        <Grid centered columns={2}>
          <Grid.Column>
            <Header as="h2" textAlign="center">
              Login
            </Header>
            <Segment>
              <Form size="large">
                <Form.Input
                  fluid
                  icon="user"
                  iconPosition="left"
                  placeholder="Email address"
                  onChange={event =>
                    this.setState({ email: event.target.value })
                  }
                />
                <Form.Input
                  fluid
                  icon="lock"
                  iconPosition="left"
                  placeholder="Password"
                  type="password"
                  onChange={event =>
                    this.setState({ password: event.target.value })
                  }
                />
                <Button
                  color="blue"
                  fluid
                  size="large"
                  onClick={this.handleLogin}
                >
                  Login
                </Button>
              </Form>
            </Segment>
            <Message ref={this.errorMessageRef} negative={true} hidden={true}>
              Email or password and incorrect
            </Message>
            <Message>
              Not registered yet? <a href="/sign-up">Sign Up</a>
            </Message>
          </Grid.Column>
        </Grid>
      </Container>
    );
  }
}

export default connect(null, { signIn, signOut })(Login);

index. js:

import React from "react";
import { createStore } from "redux";
import ReactDOM from "react-dom";
import { connect, Provider } from "react-redux";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Container } from "semantic-ui-react";
import reducers from "./reducers";
import { signIn, signOut } from "./actions";
import api from "./api/api";
import Login from "./components/Login";
import App from "./components/pages/App.js";
import Flat from "./components/pages/Flat";
import NavBar from "./components/NavBar";
import Duties from "./components/pages/Duties";
import MyDuties from "./components/pages/MyDuties";
import CreateFlat from "./components/flat/CreateFlat";
import JoinFlat from "./components/flat/JoinFlat";
import Payments from "./components/pages/Payments";
import "./components/index.css";

const store = createStore(reducers);

class Routing extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isSignedIn: null };
  }

  componentDidMount() {
    this.isLoggedIn();
  }

  isLoggedIn = async () => {
    try {
      if (localStorage.getItem("token") != null) throw "user not sign in";

      await api.getCurrentFlatmate();
      this.props.signIn();
    } catch (e) {
      this.props.signOut();
    }
  };

  render() {
    return (
      <Router>
        <NavBar />
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="/home" component={App} />
          <Route path="/sign-in" component={Login} />
          <Route path="/sign-out" component={App} />
          <Route path="/user" component={Login} />
          <Route path="/flat" component={Flat} />
          <Route path="/join-flat" component={JoinFlat} />
          <Route path="/create-flat" component={CreateFlat} />
          <Route path="/duties" component={Duties} />
          <Route path="/my-duties" component={MyDuties} />
          <Route path="/payments" component={Payments} />
        </Switch>
      </Router>
    );
  }
}

export default connect(null, { signIn, signOut })(Routing);

ReactDOM.render(
  <Provider store={store}>
    <Routing />
  </Provider>,
  document.getElementById("root")
);

Answer 1

Попробуйте использовать this.props.dispatch(signOut()) вместо this.props.signOut(). И так же для signIn()