React、Redux：状態の更新と子の再レンダリング

Question

私が直面しているシナリオは、Redux状態として格納されている一連のジョブがあることです。 Reduxでデータにアクセスするコンテナがあり、this.props.paramsのパラメータを使用して適切なJobを見つけ、その子を小道具にします。

子コンポーネント内では、ジョブによってジョブが更新され、マージされ、ストア内のジョブが更新されます。これは正常に動作しているようですが、コンテナが子を再レンダリングするときには表示されません。私はそれが私が小道具や状態として仕事を保存しないという事実と関係があることがわかります。

私の質問は、これを処理するための最良の（Redux）方法は何ですか？

したがって、JobShowにjobs = {jobs}を含めるように変更すると、ジョブが更新されたときに再レンダリングされます。これは状態が変化していないことを示しているようですが、コンテナ自体がrenderView（）を再レンダリングして再実行しても、JobShowを再レンダリングしないことも確認できます。

コンテナ：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../../actions'; 
import JobShow from './job_show'; 


class JobContainer extends Component { 
    constructor(props){ 
    super(props); 
    } 

    renderView(job, customer){ 
    let viewParam = this.props.params.view; 
    switch(viewParam){ 
     case "edit": return <JobEdit customer={customer} job={job}/> 
     case "notes": return <JobShow customer={customer} activeTab={"notes"} job={job}/> 
     case "quote": return <JobShow customer={customer} activeTab={"quote"} job={job}/> 
     case "invoice": return <JobShow customer={customer} activeTab={"invoice"} job={job}/> 
     default: return <JobShow customer={customer} activeTab={"notes"} job={job}/> 
    } 
    } 
    render() { 
    let { jobs, customers } = this.props; 

    if (jobs.length < 1 || customers.length < 1){ 
     return <div>Loading...</div>; 
    } 
    let job = jobs.find(jobbie => jobbie.displayId == this.props.params.jobId); 
    let customer = customers.find(customer => customer._id.$oid == job.customers[0]); 

    return (
     <div className="rhs"> 
     {this.renderView(job, customer)} 
     </div> 
    ); 
    } 
} 
JobContainer.contextTypes = { 
    router: React.PropTypes.object.isRequired 
}; 
function mapStateToProps(state) { 
    return { 
    jobs: state.jobs.all, 
    customers: state.customers.all 
    }; 
} 

export default connect(mapStateToProps, actions)(JobContainer); 

リデューサースニペット：@markeriksonによるコメントで指摘したように

import update from 'react-addons-update'; 
import _ from 'lodash'; 

export default function(state= INITIAL_STATE, action) { 
    switch (action.type) { 
    case FETCH_ALL_JOBS:  
     return { ...state, all: action.payload, fetched: true }; 

    case UPDATE_JOB_STATUS: 

     let newStatusdata = action.payload; 

     let jobToUpdate = state.all.find(jobbie => jobbie.displayId == newStatusdata.displayId); 
     jobToUpdate.status = newStatusdata.newStatus; 
     jobToUpdate.modifiedAt = newStatusdata.timeModified; 

     let updatedJobIndex = _.indexOf(state.all, state.all.find(jobbie => jobbie.displayId == newStatusdata.displayId)); 
     let updatedState = update(state.all, {$merge: {[updatedJobIndex]: jobToUpdate}}); 

     return { ...state, all: updatedState} 

Answer 1

問題は、私は状態を変異されたということでした。 react-addons-updateの$ set関数を使用して、コンテンツを正常に更新しました。

新しい減速スニペットは次のようになります。あなたはそれを自分で考え出したよう

case UPDATE_JOB_STATUS: 

    let newStatusdata = action.payload; 

    let jobToUpdate = state.all.find(jobbie => jobbie.displayId == newStatusdata.displayId); 
    let updatedJob = update(jobToUpdate, {status:{$set: newStatusdata.newStatus}}) 
    updatedJob = update(updatedJob, {modifiedAt:{$set: newStatusdata.timeModified}}) 

    let updatedJobIndex = _.indexOf(state.all, state.all.find(jobbie => jobbie.displayId == newStatusdata.displayId)); 
    let updatedState = update(state.all, {$merge: {[updatedJobIndex]: updatedJob}}); 

    return { ...state, all: updatedState} 

Answer 2

は見えるが、あなたはわずかなリファクタリングが何をやっているの明瞭度を向上させるかもしれません。ここでは、操作を割り当てるオブジェクトを使用して、減速の構造を変えるかもしれない方法のいくつかの例は以下のとおりです。

case ActionTypes.EDIT_TODO: 
    return Object.assign({}, 
    state, 
    { text: action.text } 
) 

から：https://github.com/mjw56/redux/blob/a8daa288d2beeefefcb88c577a7c0a86b0eb8340/examples/todomvc/reducers/todos.js

公式Reduxのドキュメントで、よりにも（redux.js.org/があります

deepFreezeなどのパッケージを使用して筆記テストを実行すると、覚えなくても状態を誤って変更した場合にエラーが発生することがあります。