Question

主要问题是不允许在调度中执行history.push()，因为您无法在调度中执行调度。作为在动作函数中实际执行重定向的替代方法，我目前正在将回调函数传递给动作方法以对历史方法进行调用。我不认为这是一个很好的做事方式，我正在寻找一种更好的方法。我这样做是在很多地方，包括在获得401错误的情况下 - 我清除会话信息并转到登录页面。以下是我的代码的外观。

client.js

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory } from "react-router";

import CreateEntity from "./pages/CreateEntity";
import Dashboard from "./pages/Dashboard";
import Entity from "./pages/Entity";


const app = document.getElementById('app');


ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Layout}>
      <Route path="dashboard" component={Dashboard}></Route>
      <Route path="createEntity" component={CreateEntity}></Route>
      <Route path="entity/:name" component={Entity}></Route>
    </Route>
  </Router>,
app);

页/ Entity.js

import React from "react";
import * as EntityActions from "../actions/EntityActions";
import EntityStore from "../stores/EntityStore";


export default class Entity extends React.Component {

  constructor() {
    super();
    this.finishDelete = this.finishDelete.bind(this);
    this.state = {
      description: undefined,
      name: undefined,
      id: undefined,
    };
  }

  delete() {
    EntityActions.deleteProject('mbrady', this.state.id, this.finishDelete)
  }

  finishDelete() {
    this.props.history.push("dashboard")
  }

  componentWillMount() {
    EntityStore.on("change", this.getProject);
    this.refresh()
  }

  componentWillUnmount() {
    EntityStore.removeListener("change", this.getProject);
  }

  render() {
    return (
      <div>
        <button class="btn btn-default" onClick={this.delete.bind(this)}>
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </div>
    );
  }
}

动作/ EntityActions.js

import dispatcher from "../dispatcher";
import axios from "axios";
import * as config from '../AppConfig'

export function deleteEntity(user, id, delete_callback) {
  dispatcher.dispatch({type: "DELETE_ENTITY"});
  const url = "http://localhost:"+port+"/"+config.appName+"/some_url";
  axios.delete(url)
    .then((response) => {
      dispatcher.dispatch({type:"DELETE_ENTITY_FULFILLED", payload: response.data});
      console.log(delete_callback)
      delete_callback(response.data);
    })
    .catch((err) => {
      dispatcher.dispatch({type:"DELETE_ENTITY_FAILED", payload: err})
    })
}

存储/ EntityStore.js

import { EventEmitter } from "events";

import dispatcher from "../dispatcher";


class CurrentProjectStore extends EventEmitter {

  constructor() {
    super()
    this.project = undefined;
  }

  handleActions(action) {
    switch(action.type) {
      case "DELETE_PROJECT": {
        break;
      }
      case "DELETE_PROJECT_FAILED": {
        break;
      }
      case "DELETE_PROJECT_FULFILLED": {
        this.project = undefined
        break;
      }
    }
  }

}

const projectStore = new CurrentProjectStore;
dispatcher.register(projectStore.handleActions.bind(projectStore));

export default projectStore;

如何使用react-router和hashHistory在基于flux的反应中执行动作完成页面重定向

0 个答案: