Я новичок в 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», я звоню listEmployees() действия, и я хочу, чтобы список сотрудников на экране. Но когда я запускаю проект, нажав «Сотрудники», действие вызывается, а затем редуктор. Но в файле header.js я вижу обновленный «this.props.list», но тот же, когда приходит в EmployeeTable, он не определен. Пожалуйста помоги.
Спасибо за ответ. Но EmployeeTable является компонентом презентации. Правильно ли сделать компонент презентации осведомленным о сокращении? – User1230321
Я не думаю, что это проблема. Кроме того, вам нужно сделать реквизиты доступными для этого, чтобы он мог визуализировать и обновлять изменения. Именно это сокращение –