Javascript 减速器更新了ApporarRayProp，但Redux没有'；不要更新我的视图

我是Redux的新手，我想在调用API后更新数组this.props.apposArrayProp，但是我被卡住了，操作和减速器都被执行了，但是视图无论如何都不会改变。我不知道连接方法中是否需要mapDispatchToProps

My actions.js文件

import fetch from 'isomorphic-fetch'

export const RECEIVE_APPOS   = 'RECEIVE_APPOS'

export function fetchAppos(appo_id) {
  console.log('in fetchAppos 148')
    return dispatch => {
      return fetch('/appointments/get_appos')
       .then(response => response.json())
       .then(json => dispatch(receiveAppos(json)))
 }
}

function receiveAppos(apposArrayProp) {
  console.log('receiveAppos Action>>>>>'+JSON.stringify(apposArrayProp))
  return {
    type:  RECEIVE_APPOS,
    apposArrayProp
  }
}

reducer文件appointments\Rdcer.js：

import { fetchAppos, RECEIVE_APPOS } from '../actions/actions'

const initialState = {
  apposArrayProp: []
}
const appointments_Rdcer = (state = initialState, action) => {
  switch (action.type) {
    case RECEIVE_APPOS:
      console.log('RECEIVE_APPOS REDUCER >>>'+
     JSON.stringify(action.apposArrayProp))
      return Object.assign({}, state, {
            apposArrayProp: action.apposArrayProp
        })

    default:
      return state
  }
}

export default appointments_Rdcer

最后，我的Container.js文件：

import { connect } from 'react-redux'
import React, { Component, PropTypes } from 'react'
import { ReactDom } from 'react-dom'
import * as ApposActionCreators from '../actions/actions'

class ApposComponent extends Component {
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    console.log('In componentDidMount'+JSON.stringify(this.props))
    let action = ApposActionCreators.fetchAppos()
    this.props.dispatch(action)
  }
  render() {
    var tempo = ''
    var trNodes = this.props.apposArrayProp.map(function (appo) {
      tempo += appo.petname
      console.log('##  I want to see this #####' + tempo)
    })
    return (
      <div className="appoList">Display {tempo} </div>
    )
  }
}

ApposComponent.propTypes = {
  apposArrayProp: PropTypes.array.isRequired
}

ApposComponent.defaultProps = {
   apposArrayProp:  []
 }

const mapStateToProps = (state) => {
  return {
    apposArrayProp: state.apposArrayProp
  }
}

export default connect(mapStateToProps)(ApposComponent)

致：

}

---

听从你的建议，现在一切都成了一种魅力。谢谢

您的

MapStateTops

函数应该如下所示：

const mapStateToProps = (state) => {
  return {
    apposArrayProp: state.appointments_Rdcer.apposArrayProp
  };
};

这应该足以让它工作

---

此外，我还鼓励您查看渲染逻辑。您使用的是

Array#map

，就像使用

Array#forEach

一样。您所拥有的功能仍然可以使用，但有点难看。

您的

MapStateTrops

函数应该如下所示：

const mapStateToProps = (state) => {
  return {
    apposArrayProp: state.appointments_Rdcer.apposArrayProp
  };
};

这应该足以让它工作

此外，我还鼓励您查看渲染逻辑。您使用的是

Array#map

，就像使用

Array#forEach

一样。你所拥有的仍然有用，但有点难看

const mapStateToProps = (state) => {
  return {
    apposArrayProp: state.appointments_Rdcer.apposArrayProp
  };
};