reduxストアでの配列の変更

Question

私はreact + redux + thunk上に構築されたWebアプリケーションで作業しています。

以下のようなアクションクリエイターがあります。 2つの非同期API呼び出しがあります。最初にfetchUser（）はサーバーからユーザー関連情報を取得し、fetchUserCommentsはユーザーのコメントをすべて返す別の非同期呼び出しです。

export function fetchUserInfoFlow() { 
    return (dispatch, getState) => { 
    return dispatch(fetchUser()).then(() => { 
     return dispatch(fetchUserComments() 
    }) 
    } 
} 

export function fetchUser() { 
    return (dispatch, getState) => { 
    return axios.get('urlhere') 
     .then(function (response) { 
     // basically fetch user data and update the store 
     dispatch({type: FETCH_USERS, user:response.data) 
     }) 
     .catch(function (error) { 
     console.error(error) 
     }) 
    } 
} 

export function fetchUserComment() { 
    return (dispatch, getState) => { 
    return axios.get('urlhere') 
     .then(function (response) { 

     // fetch user comments, get the user list from store, matching the user id and append the comments list to the user 

     let user = {...getState().user} 
     response.data.forEach(function (userComment) { 
     user.forEach(function (userComment) { 
      if(user.userId = userComment.userId){ 
       user.comments = userComment.comments 
      } 
     } 
     } 
     dispatch({type: UPDATE_USER_COMMENT, user:response.data) 
     }) 
     .catch(function (error) { 
     console.error(error) 
     }) 
    } 
} 

上記のフェッチユーザーの関連情報と同様のアクション作成者がいくつかあり、最後にストアのユーザーリストの変更を更新しています。

問題は、状態が更新されたときにコンポーネントが再レンダリングされず、ユーザーリストをどこかに変更したと思われます。

そして、アクションクリエータでgetSate（）を使用するのはいくつかのケースでのみ使用し、状態を変更するので値を更新しないでください。

この場合、ユーザーリストを変更するロジックはどこに置くべきですか、ユーザーリストの変更を避けるにはどうすればよいですか。

ありがとうございます！ザッツは唯一の場所あなたが状態の変更を行うべきであるので、

Answer 1

この部分はちょうど、あなたの減速に入る必要があります。

let user = {...getState().user} 
    response.data.forEach(function (userComment) { 
    user.forEach(function (userComment) { 
     if(user.userId = userComment.userId){ 
      user.comments = userComment.comments //mutating state 
     } 
    } 
    }