【发布时间】：2017-04-05 15:41:40
【问题描述】：
我想在我的组件中触发一个动作。这是一个表示组件，不需要了解 redux。路由器实现是使用 react-router-redux 完成的。
main.js:
let store = createStore(rootReducer)
const history = syncHistoryWithStore(hashHistory, store)
class RenderClass extends Component {
render() {
return (
<Provider store={store}>
<Router history={history}>
<Route path="/" component={MainLayout}>
<Route name="employees" path="/employees" url="http://localhost:8080/" component={EmployeeTable}></Route>
<Route name="personalInformation" path="/personalInformation/:employeeId" url={URI} component={PersonalInformation} />
.....
</Route>
<Router>
</Provider>
);
}
}
App.jsx：
import * as Actions from './action-creator';
const MainLayout = React.createClass({
render: function() {
const { dispatch, list } = this.props;
let actions = bindActionCreators(Actions, dispatch);
console.log(actions);
return (
<div className="wrapper">
<Header actions={actions} list={list} params={this.props.params} />
{React.cloneElement(this.props.children, this.props)}
</div>
)
}
});
function select(state) {
return {
list: state.listingReducer
}
}
export default connect(select)(MainLayout);
header.js：
define(
[
'react',
'jquery',
'appMin'
],
function (React, $) {
var Link = require('reactRouter').Link;
var Header = React.createClass({
handleClick: function () {
//Action called here
this.props.actions.listEmployees();
},
render: function () {
return (
<ul className="sidebar-menu">
<li>
<Link to={'/employees'} onClick={this.handleClick}><i className="fa fa-home"></i>Employees</Link>
</li>
</ul>
);
}
});
return Header;
}
)
employee.js：
define(
[
'react',
'jquery',
'appMin'
],
function (React, $) {
var EmployeeTable = React.createClass({
render: function () {
if (this.props.list != undefined) {
var listItems = this.props.list.map(function (listItem) {
return (
<tr key={listItem.id}>
<td> {listItem.name}</td>
<td><Link to={'/personalInformation/' + employee.id} onClick={this.props.actions.displayPersonalInformation(employee.id)}>Personal Information</Link></td>
......
</tr>
);
}, this);
})
}
return (
<table>
<tbody>
{listItems}
</tbody>
</table>
);
}
})
}
)
action-creator.js：
export function listEmployees() {
return {
type: types.LIST_EMPLOYEES
};
}
export function displayPersonalInformation() {
return {
type: types.DISPLAY_PERSONAL_INFORMATION
};
}
reducer.js:
function addEmployee(state, action) {
switch (action.type) {
case types.LIST_EMPLOYEES:
return {"id":"1", "name":"Stackoverflow"}
default:
return state
}
}
function listingReducer(state = [], action) {
switch (action.type) {
case types.LIST_EMPLOYEES:
return [
...state,
addEmployee(undefined, action)
]
case types.DISPLAY_PERSONAL_INFORMATION:
return // Gets personal Information
default:
return state;
}
}
const rootReducer = combineReducers({
listingReducer
})
export default rootReducer
道具不会包含动作，因为我没有将它绑定到道具。我尝试在 App.js 中编写 mapStateToProps 和 mapDispatchToProps 如下所示：
function mapStateToProps(state) {
return {
list: state.list
}
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators({ actionCreators }, dispatch) }
}
导出默认连接(mapStateToProps, mapDispatchToProps)(MainLayout) 我收到调度不是功能错误。错误语句实际上听起来像是stackoverflow中的重复问题，但我也想知道我使用mapDispatchToProps的目的也是正确的。提前致谢。
【问题讨论】：
-
您在哪个部分 od 代码上收到此错误？
-
@JaganathanBantheswaran：我在 mapDispatchToProps 函数中以及在触发操作后收到此错误。除了错误，我想知道当我应该在使用 redux 路由器时在表示组件中使用操作时我应该做什么。
标签： reactjs redux react-redux jsx react-router-redux