我是redux的新手。我在我的项目中使用 ES5。我刚刚开始在此实现 redux。
main.js:
let store = createStore(rootReducer); //Reducer defined in reducer.js file
class RenderClass extends Component {
render() {
return (
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/" component={MainLayout}>
<Route name="employees" path="/employees" url="http://localhost:8080/" component={EmployeeTable}></Route>
.....
</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} />
{this.props.children}
</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} list={this.props.list} actions={this.props.actions}><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>
......
</tr>
);
}, this);
})
}
return (
<table>
<tbody>
{listItems}
</tbody>
</table>
);
}
})
}
)
action-creator.js:
export function listEmployees() {
return {
type: types.LIST_EMPLOYEES
};
}
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)
]
default:
return state;
}
}
const rootReducer = combineReducers({
listingReducer
})
export default rootReducer
单击“header.js”文件中定义的“Employees”条目时，我正在调用 listEmployees() 操作，我想在屏幕上列出员工。但是，当我运行项目时，单击“员工”时，会调用该操作，然后是减速器。但是，在 header.js 文件中，我看到“this.props.list”已更新，但在 EmployeeTable 中它是未定义的。请帮忙。