使用 redux-form，如何根据 ASYNC redux 状态设置 initialValues？

Question

我正在使用 React redux-form。我正在努力创建一个 React 组件以允许用户编辑他们的个人资料。

以下是我为 redux-form 设置 initalValues 的方法：

import * as profilesActions from '../../actions/profilesActions';
....
const mapStateToProps = state => {
  return {
    currentUser: state.currentUser,
    currentUserProfile: state.profiles.find(el => el.id === state.currentUser.user_id),
    initialValues: {
      first_name: state.currentUserProfile.first_name,
      last_name: state.currentUserProfile.last_name
    }
  };
};

现在的问题是：

Uncaught TypeError: Cannot read property 'first_name' of undefined

原因是用户的配置文件尚未加载到 state.profiles...

如何在 currentUserProfile 更改时将 initialValues 设置为 set/updated？

已更新

profilesActions.js

import * as types from './actionTypes';
import ProfilesApi from '../api/ProfilesApi';

export function loadProfileSuccess(profile) {
  return {type: types.LOAD_PROFILE_SUCCESS, profile};
}

export function loadProfile(user_id) {
  return function(dispatch) {
    return ProfilesApi.loadProfile(user_id).then(profile => {
      dispatch(loadProfileSuccess(profile));
    }).catch(error => {
      throw(error);
    });
  };
}

动作类型

export const LOAD_PROFILE_SUCCESS = 'LOAD_PROFILE_SUCCESS';

已更新

这是我最近的尝试：

export const LOAD_PROFILE_SUCCESS = 'LOAD_PROFILE_SUCCESS';

Profile = connect(
  state => ({
    initialValues: {
      first_name: state.currentUserProfile.first_name,
      last_name: state.currentUserProfile.last_name
    }
  }),
  { profilesActions: LOAD_PROFILE_SUCCESS }               // bind account loading action creator
)(Profile)

这是错误的 bindActionCreators expected a function actionCreator for key 'profilesActions', instead received type 'string

Answer 1

react-redux connect的第二个参数是一个以dispatch为参数的函数（参见文档here）。正确的使用方法如下：

Profile = connect(
  state => ({
    initialValues: {
      first_name: state.currentUserProfile.first_name,
      last_name: state.currentUserProfile.last_name
    }
  }),
  dispatch => ({ profilesActions: dispatch({ type : LOAD_PROFILE_SUCCESS }) })
)(Profile)

使用 redux-form，如何根据 ASYNC redux 状态设置 initialValues？

With redux-form, how to set initialValues based on an ASYNC redux state?

reactjs

react-redux

react-redux-form

已更新

已更新