ajax - 如何基于异步源设置初始值，例如使用 redux-form 的 ajax 调用

Question

在 redux-form 的官方页面和 GitHub 问题中关于如何使用 initialValues 的示例不止一个，但是我找不到一个专注于解释如何设置 initialValues 以响应异步源的示例。

我想到的主要情况类似于一个简单的 CRUD 应用程序，用户将在其中编辑某个已经存在的实体。当第一次打开 View 并安装 redux-form 组件时，但在呈现组件之前，必须设置 initialValues。假设在这个例子中，当组件第一次安装和呈现时，数据是按需加载的。这些示例显示了基于硬编码值或 redux 存储状态设置 initialValues，但我找不到重点是如何基于诸如调用 XHR 或 fetch 之类的异步设置initialValues。

我确定我只是缺少一些基本的东西，所以请指出我正确的方向。

引用:

Initializing Form State

Handling form defaults

What is the correct way to populate a dynamic form with initial data?

Answer 1

编辑:来自 ReduxForm 文档的更新解决方案

现在是 documented在最新版本的 ReduxForm 中，并且比我之前的答案简单得多。

关键是connect使用 ReduxForm 装饰后的表单组件。然后您就可以访问initialValues prop 就像组件上的任何其他 prop 一样。

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
InitializeFromStateForm = reduxForm({
  form: 'initializeFromState'
})(InitializeFromStateForm)

// now set initialValues using data from your store state
InitializeFromStateForm = connect(
  state => ({
    initialValues: state.account.data 
  })
)(InitializeFromStateForm)

我通过使用 redux-form reducer plugin 实现了这一点。方法。

以下演示获取异步数据并使用响应预填充用户表单。

const RECEIVE_USER = 'RECEIVE_USER';

// once you've received data from api dispatch action
const receiveUser = (user) => {
    return {
       type: RECEIVE_USER,
       payload: { user }
    }
}

// here is your async request to retrieve user data
const fetchUser = (id) => dispatch => {
   return fetch('http://getuser.api')
            .then(response => response.json())
            .then(json => receiveUser(json));
}

然后在您的根 reducer 中包含您的 redux-form reducer 您将包含您的 reducer 插件，该插件使用返回的获取数据覆盖表单值。

const formPluginReducer = {
   form: formReducer.plugin({
      // this would be the name of the form you're trying to populate
      user: (state, action) => {
         switch (action.type) {
             case RECEIVE_USER:
                return {
                  ...state,
                  values: {
                      ...state.values,
                      ...action.payload.user
                  }
               }
            default:
               return state;
         }
      }
   })
};

const rootReducer = combineReducers({
   ...formPluginReducer,
   ...yourOtherReducers
});

最后，您将新的 formReducer 与应用程序中的其他 reducer 结合起来。

Note The following assumes that the fetched user object's keys match the names of the fields in the user form. If this is not the case you will need to perform an additional step on the data to map fields.