如何將從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)。