1

首先，我应该提到我遵循了这个模式，我将在我的项目中向你展示另外两组 React 组件。

出于某种原因，它似乎不起作用，我一直专注于@connect或者减速器是问题所在。我已经让几个人查看了这个问题，并且我尝试了几种不同的方法来解决这个问题。

import classNames from 'classnames';
import SidebarMixin from 'global/jsx/sidebar_component';

import Header from 'common/header';
import Sidebar from 'common/sidebar';
import Footer from 'common/footer';
import AppList from '../components/lists';

import { connect } from 'react-redux'

import actions from 'redux/actions';
import { VisibilityFilters } from 'redux/actions/actionTypes';

@connect((state) => state)
  class AppContainer extends React.Component {
    constructor(props) {
      super(props)
  }
  componentWillMount() {
    this.props.dispatch(actions.getUnconsidered(1));
    this.props.dispatch(actions.getConsidered(3));
    this.props.dispatch(actions.getInterviews(4));
    this.props.dispatch(actions.getOffers(2));
  }

这就是分派四个动作来为应用程序获取数据。我们正在使用 Redux Thunk 中间件来处理与发出这些 Ajax 请求相关的异步问题。

我发现来自所有这些 Ajax 调用的数据都到达了 reducer。

render() {

console.log("AppContainer state", this.props);

这个 console.log 应该记录两次......在第一次渲染期间一次为空，然后在减速器之后状态发生变化时再次记录，这应该显示我的数据映射到道具的状态，因为@connect.

我相当肯定这一点，因为我已经完成了其他观点。

    return (
      <div>
        <Container id='body'>
          <Grid>
            <Row>
              <Col md={3}>
                <AppList data={this.props.unconsidered}/>
              </Col>
              <Col md={3}>
                <AppList data={this.props.considered} />
              </Col>
              <Col md={3}>
                <AppList data={this.props.interviews} />
              </Col>
              <Col md={3}>
                <AppList data={this.props.offers} />
              </Col>
            </Row>
         </Grid>
       </Container>
     </div>
     )
   }
 }

@SidebarMixin
export default class extends React.Component {
render() {
const dispatch = this.props.dispatch
    var classes = classNames({
        'container-open': this.props.open
    })
    return (
        <Container id='container' className={classes}>
            <Sidebar />
            <Header />
            <AppContainer />
            <Footer />
        </Container>
    )}
   }

下一个代码块是我的动作创建者文件。

import axios from 'axios';
import {GET_UNCONSIDERED,
              GET_CONSIDERED,
              GET_INTERVIEWS,
              GET_OFFERS } from './actionTypes';

function getUnconsidered(jobID){
    console.log('getUnconsidered Actions')
    return dispatch => axios.get('/user/employer/appsbystatus?jobID='+jobID+'&status=unconsidered')
        .then(
            payload => dispatch({ type: GET_UNCONSIDERED, payload})
        )
        .catch(resp => console.log("Error fetching unconsidered", resp));
}

function getConsidered(jobID){
    return dispatch => axios.get('/user/employer/appsbystatus?jobID='+jobID+'&status=considered')
        .then(
            payload => dispatch({ type: GET_CONSIDERED, payload})
        );
}

function getInterviews(jobID){
    return dispatch => axios.get('/user/employer/appsbystatus?jobID='+jobID+'&status=interviews')
        .then(
            payload => dispatch({ type: GET_INTERVIEWS, payload})
        );
}

function getOffers(jobID){
    return dispatch => axios.get('/user/employer/appsbystatus?jobID='+jobID+'&status=offers')
        .then(
            payload => dispatch({ type: GET_OFFERS, payload})
        );
    }

module.exports = {
    getUnconsidered: getUnconsidered,
    getConsidered: getConsidered,
    getInterviews: getInterviews,
    getOffers: getOffers
}

这是我的减速器文件，我相信我的问题出在哪里。

import {GET_UNCONSIDERED,
          GET_CONSIDERED,
          GET_INTERVIEWS,
          GET_OFFERS } from '../actions/actionTypes';


function empdashboard(state = {}, action) {
    console.log("state in dashboard reducer = ", state);
    switch (action.type) {
        case GET_UNCONSIDERED:
            console.log("unconsidered:", action.payload)
            const unconsidered = action.payload.data;
            return Object.assign({}, state, {
                unconsidered: unconsidered
            });
        case GET_CONSIDERED:
            console.log("considered:", action.payload)
            const considered = action.payload.data;
            return Object.assign({}, state, {
                considered: considered
            });
        case GET_INTERVIEWS:
            console.log("interviews:", action.payload)
            const interviews = action.payload.data;
            return Object.assign({}, state, {
                interviews: interviews
            });
        case GET_OFFERS:
            console.log("offers:", action.payload)
            const offers = action.payload.data;
            return Object.assign({}, state, {
                offers: offers
            });
        default:
            return state;
    }
}

module.exports = {
    empdashboard: empdashboard
}

老实说，我的印象是我的减速器搞砸了，或者我有一个错误，@connect它没有检测到状态变化来重新呈现我的视图。

谢谢你看看这个！

4

0 回答 0