减速器更新apposArrayProp，但Redux不更新我的视图

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

我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 
    } 
}

减速器文件，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)

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

我在日志中看到的变化：

解决

¡戴夫·沃尔什！¡我是欢迎您！

我改变了我的减速从：

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) 
}

}

，跟着你的建议，现在所有的工作作为一种魅力。谢谢！

来源

2016-02-29 aarkerio

你mapStateToProps功能应该是这样的：

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

这应该是足够得到它的工作。

此外，我还鼓励你看看你的渲染逻辑。您正在使用Array#map就像它的Array#forEach。你拥有的东西仍然可以工作，但它有点难看。

来源

2016-02-29 22:30:49

减速器更新apposArrayProp，但Redux不更新我的视图

回答

相关问题