我正在尝试使用多个Reducer,但在使其工作时遇到问题。我有2种动作类型(LOGIN_USER和CALENDAR_EVENTS),但保持相同的输出。即使对于CALENDAR_EVENTS操作,我也从LOGIN_USER操作获取有效负载。有效负载正在返回" false"这是Auth操作的有效负载。我这样做是对的吗?以下是完整的代码。
// types.js
export const LOGIN_USER = 'LOGIN_USER';
export const CALENDAR_EVENTS = 'CALENDAR_EVENTS';
// AuthActions.js
import { LOGIN_USER } from './types';
export function authenticate(isLoggedIn) {
return {
type: LOGIN_USER,
payload: isLoggedIn
}
}
// AuthReducer.js
import { LOGIN_USER } from '../actions/types';
export default (state = false, action) => {
switch(action.type) {
case LOGIN_USER:
return action.payload
}
return state
}
// CalendarActions.js
import { CALENDAR_EVENTS } from './types';
export function fetchEvents() {
return {
type: CALENDAR_EVENTS,
payload: events
}
}
const events = [
{
"summary": "Meeting with the board of directors",
"description": "Meeting with the board of directors",
"updated": "Jan 9, 2014",
"timeZone": "GMT",
"completed": false
},
{
"summary": "Meeting with the board of directors",
"description": "Meeting with the board of directors",
"updated": "Jan 9, 2014",
"timeZone": "GMT",
"completed": true
},
{
"summary": "Meeting with the board of directors",
"description": "Meeting with the board of directors",
"updated": "Jan 9, 2014",
"timeZone": "GMT",
"completed": true
},
{
"summary": "Meeting with the board of directors",
"description": "Meeting with the board of directors",
"updated": "Jan 9, 2014",
"timeZone": "GMT",
"completed": true
},
{
"summary": "Meeting with the board of directors",
"description": "Meeting with the board of directors",
"updated": "Jan 9, 2014",
"timeZone": "GMT",
"completed": true
}
]
// CalendarReducer.js
import { CALENDAR_EVENTS } from '../actions/types';
export default (state = [], action) => {
switch(action.type) {
case CALENDAR_EVENTS:
return [action.payload, ...state]
}
return state
}
// Reducer.js
import { combineReducers } from 'redux';
import AuthReducer from './AuthReducer';
import CalendarReducer from './CalendarReducer';
const rootReducer = combineReducers({
authenticate: AuthReducer,
events: CalendarReducer
});
export default rootReducer;
// ViewEvents.js
import React, { Component, PropTypes } from 'react';
import {List, ListItem} from 'material-ui/List';
import Checkbox from 'material-ui/Checkbox';
import '../CompanyHome.scss';
import * as calendarActions from '../../../../actions/CalendarActions';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
class CalendarBlock extends Component {
constructor(props) {
super(props);
this.renderEventList = this.renderEventList.bind(this)
}
componentWillMount() {
return this.props.fetchEvents()
}
renderEventList() {
console.log (this.props.events)
}
render() {
return(
<List className="ScheduleList">
{this.renderEventList()}
<ListItem className="ScheduleListItem" primaryText="Meeting with the board of directors" secondaryText="Jan 9, 2014" leftCheckbox={<Checkbox />} />
<ListItem className="ScheduleListItem" primaryText="Call with Paul" secondaryText="Jan 9, 2014" leftCheckbox={<Checkbox />} />
<ListItem className="ScheduleListItem" primaryText="Interview with Developer Candidates" secondaryText="Jan 9, 2014" leftCheckbox={<Checkbox />}/>
<ListItem className="ScheduleListItem" primaryText="Lunch with department head" secondaryText="Jan 9, 2014" leftCheckbox={<Checkbox />}/>
</List>
);
}
}
CalendarBlock.PropTypes = {
index: PropTypes.array.isRequired
};
const mapStateToProps = (state) => {
return {
events: state.events
}
}
const mapActionsToProps = (dispatch) => {
return {
actions: bindActionCreators(calendarActions, dispatch)
}
}
export default connect(mapStateToProps, mapActionsToProps)(CalendarBlock);