reducer更新apposArrayProp但Redux不更新我的视图

Question

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

我的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文件，appointmentments_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)

版本： “反应”：“^ 0.14.7”， “react-redux”：“^ 4.4.0”， “redux”：“^ 3.3.1”，

我在日志中看到了变化：

解决

Dave Walsh！，Muchas gracias！

我改变了我的减速机：

export default function rootReducer(state = {}, action) {
  return {
    appointments: appointments_Rdcer(state.appointments_Rdcer, action)
  }
}

到：

export default function rootReducer(state = {}, action) {
  return {
   appointments_Rdcer: appointments_Rdcer(state.appointments_Rdcer, action)
}

}

并遵循你的建议，现在所有人都充满了魅力。谢谢！

Answer 1

您的mapStateToProps功能应如下所示：

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

这应该足以让它发挥作用。

此外，我还建议您查看渲染逻辑。您正在使用Array#map之类的Array#forEach。你拥有的东西仍然会有效，但它有点难看。