Можно ли вызвать функцию действий в моем редукторе из маршрута в Express?

Question

У меня есть маршрут в Express, и я хотел бы вызвать функцию действия, импортированную из моего редуктора:

/* initial state */
export var usersStartState = {
  isAccountVerified: false,
};

/* action types */
export const actionTypes = {
  IS_ACCOUNT_VERIFIED: 'IS_ACCOUNT_VERIFIED',
};

/* reducer(s) */
export default function users(state = usersStartState, action) {
  switch (action.type) {
    case actionTypes.IS_ACCOUNT_VERIFIED:
      return Object.assign({}, state, { isAccountVerified: true });
    default:
      return state;
  }
}

/* actions */
export const hasBeenVerified = () => {
  return { type: actionTypes.IS_ACCOUNT_VERIFIED };
};

И это мой маршрут:

var router = require('express').Router();
var passport = require('passport');
var User = require('../models/UserModel');
var Token = require('../models/TokenSchema');
import { hasBeenVerified } from '../../store/reducers/users/index';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

router.route('/confirmation/:token').get((req, res, next) => {
  var usersToken = req.params.token;
  try {
    Token.findOne({ token: usersToken }, function(err, token) {
      if (err)
        return res.status(404).send({
          type: 'not-verified',
          msg: 'We were unable to find a valid token. Your token my have expired.'
        });
      // If we found a token, find a matching user
      User.findOne({ _id: token._userId, email: req.body.username }, function(err, user) {
        if (err)
          return res
            .status(404)
            .send({ msg: 'We were unable to find a user for this token.' });
        if (user.isVerified)
          return res.status(400).send({
            type: 'already-verified',
            msg: 'This user has already been verified.'
          });

        // Verify and save the user
        user.isVerified = true;
        user.save(function(err) {
          if (err) {
            return res.status(500).send({ msg: err.message });
          }
        });
      });
      hasBeenVerified(); // firing it here
      console.log('hasBeenVerified();', hasBeenVerified());
      res.redirect('/confirmed');
    });
  } catch (err) {
    return next(err);
  }
});

I Попытка установить hasBeenVerified(); console.log('hasBeenVerified()', hasBeenVerified());

И он возвращает вывод в терминале:

hasBeenVerified(); { type: 'IS_ACOUNT_VERIFIED' }

Но это не меняет начальное состояние магазина.

export var usersStartState = {
  isAccountVerified: false, //still false after the `hasBeenVerified` executed
};

Есть мысли, как это исправить?

Answer 1

Как указано в комментариях, вам необходимо:

• Отправить необходимые части вашего состояния внешнего интерфейса на ваш бэкэнд
• Ваш бэкэнд проверяет, используя данные, которые были отправлены
• Backend отвечает статусом проверки на ваш интерфейс
• Frontend использует эти данные проверки для обновления Redux

Просмотреть демонстрацию здесь

Ниже приведены «мясо и картофель» из того, что необходимо для обозначения вышеуказанных шагов. Хотя, Я опубликовал весь код, который я написал в следующем репозитории GitHub - я предлагаю вам разветвить его и запустить его локально, чтобы по-настоящему понять суть ..

Backend :

сервер. js

const express = require('express');
const cors = require('cors');

const app = express();
const port = 8002;

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cors());

app.post('/authorize', (req, res) => {
    if (req.body.un === 'a' && req.body.pw === 'a') {
        res.status(200).send('true');
    } else {
        res.status(200).send('false');
    }
});

// For 404
app.use((req, res) => {
    res.status(404).send("Unable to find that!");
});

app.listen(port, () => {
    console.log(`Server listening on port ${port}`);
});

Внешний интерфейс:

Приложение. js

import React, { Component } from "react";
import { BrowserRouter, Link } from "react-router-dom";
import Routes from "./Routes";
import withRedux from "./Redux/containers";

class App extends Component {
  state = {
    un: "",
    pw: ""
  };

  handleUnInput = event => {
    this.setState({
      ...this.state,
      un: event.target.value
    });
  };

  handlePwInput = event => {
    this.setState({
      ...this.state,
      pw: event.target.value
    });
  };

  handleLogout = () => {
      this.props.setAccountStatus(false);
  }

  handleLogin = () => {
    fetch("http://localhost:8002/authorize", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ un: this.state.un, pw: this.state.pw })
    })
      .then(res => res.text())
      .then(data => {
        if (data === "true") {
          this.props.setAccountStatus(true);
        } else {
          alert("Incorrect credentials!");
        }
      })
      .catch(err => console.log("Something went wrong! " + err.message));
  };
  render() {
    const { isAccountVerified } = this.props.state;

    return (
      <BrowserRouter>
        <Link to="/">Home</Link>
        <br />
        <Link to="/protected">Protected</Link>
        <div style={{ margin: '40px' }}>
          {isAccountVerified ? (
            <button onClick={this.handleLogout}>Logout</button>
          ) : (
            <React.Fragment>
              <p>
                Try to visit the 'Protected' route above. Unless you are logged
                in it won't work.
              </p>
              Username:
              <input type="text" onInput={this.handleUnInput} />
              <br />
              Password:
              <input type="password" onInput={this.handlePwInput} />
              <br />
              <small>Username is 'a' password is 'a'</small>
              <br />
              <button onClick={this.handleLogin}>Login</button>
            </React.Fragment>
          )}
        </div>
        <Routes />
      </BrowserRouter>
    );
  }
}

export default withRedux(App);