如何将从REDX路由器的推送方法添加到操作

Question

我试图在操作中添加push方法从redux-router。 当我初始化操作时，推送接收有效载荷中的对象，但不改变页面。 enter image description here

动作/ index.js

import { push } from 'redux-router'; 
 

 
export const actions = {}; 
 

 
actions.goTo =() => { 
 
    return (dispatch) => { 
 
     dispatch(push('/staff')); 
 
    }; 
 
};

但是，如果我的init push不是从动作，而是直接在组件它的作品的权利。

MyComponent的/ index.js

import { push } from 'redux-router'; 
 
import { connect } from 'react-redux'; 
 

 
@connect((state) => ({})) 
 
export default class MyComponent extends Component { 
 

 
constructor (props) { 
 
     super(props); 
 
     this._goTo = ::this._goTo; 
 
    } 
 
    
 
_goTo (event) { 
 
     event.preventDefault(); 
 
     const { dispatch } = this.props; 
 
     dispatch(push('/staff')); 
 
    } 
 
    
 
    render() { 
 
     return (
 
      <section> 
 
       <button onClick = { this._goTo }>from component</button> 
 
      </section> 
 
     ); 
 
    } 
 
}

Answer 1

在编写中间件时可能发生错误。

注意：路由器中间件应该遵循Logger中间件。

赞一个：

compose(
    applyMiddleware(...middleware), 
    reduxReactRouter({ createHistory }) 
); 

Answer 2

所以，push()可以仅从一个连接的组件的内部工作。如果你想从你的actions/index.js文件中使用它，你可以将它作为参数传递并在那里调用它，而不必导入它。你可以有这样的东西：

export const actions = {}; 

actions.goTo = (route, push) => { 
    return() => { 
     push(`/${route}`); 
    }; 
}; 

并从你的组件调用它为actions.goTo('staff', push)。