在Redux

时间:2016-06-15 23:31:35

标签: javascript reactjs redux react-redux

我正在尝试使用多个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);

0 个答案:

没有答案