stateProps値null in mergeProps

Question

サーバーからユーザーデータを取得する非同期要求を発生させるmapStateToProps関数があります。成功した結果は、ユーザーを実際に状態に設定する別のアクションを発生させます。これらはすべて正常に動作します。私が今必要とするのは、ユーザーデータが状態に設定された後、fetchUserから設定されたユーザー値を使用して別のアクション（setEditUserModel）を起動する必要があるということです。

mapStateToPropsでstateにアクセスできないため、mergeProps接続オプションを追加しました。 mapStateToPropsとmapDispatchToPropsを組み合わせて（マージする）ことは私の理解です。下のコードでこれを行うと、mergePropsのstateProps.userは、私のAppStateを検査するときの実際の値がnullではなくても、nullです。

function mapStateToProps(state: AppState): EditUserStateProps { 
    return { 
    user: state.user.data 
    }; 
} 

function mapDispatchToProps(dispatch: Dispatch<ActionTypes>): EditUserDispatchProps { 
    return { 
    fetchUser: (id: number) => { 
     return fetchUser(id)(dispatch); 
    }, 
    setEditUserModel: (user: User) => { 
     dispatch(actionCreators.setEditUserModel(user)); 
    } 
    } 
}; 

function mergeProps(stateProps: EditUserStateProps, dispatchProps: EditUserDispatchProps, ownProps: EditUserContainerProps) { 
    return { 
    ...ownProps, 
    ...stateProps, 
    ...dispatchProps, 
    fetchUser: (id: number) => { 
     return dispatchProps.fetchUser(id).then(() => { 
     dispatchProps.setEditUserModel(stateProps.user); 
     }); 
    } 
    } 
} 

なぜstateProps.userの値がnullですか？

Answer 1

stateProps.userは、javascriptがクロージャのスコープチェーンをどのように処理するかによって、nullです。 dispatchProps.setEditUserModel()を呼び出すクロージャが、stateProps.fetchUser()プロミスが解決された後に実行されると、実際には宣言中にスコープ内にあったstatePropsオブジェクトを参照していますが、その場合でもNULL user propが含まれます。

あなたが代わりにそれをコピーするのでReduxのストアの状態を変異させ、その後、何とか自分のmergeProps()にすべての方法ダウンし、その参照を渡すとしたら、あなたはこのバグが消えて表示される場合がありますmergeProps()閉鎖参照であるため、今stateProps同じオブジェクトレキシブストアにあります。ただし、Reduxレデューサーは純粋な機能でなければならないため、これはお勧めできません。

代わりにuserオブジェクトでstateProps.fetchUser()に返されたプロミスを解決し、それをdispatchProps.setEditUserModel()に渡すことを検討することがあります。