使用 react-redux 时处理 POST 请求

Question

我有一个NewGroup 组件，它对后端进行 POST 调用。当调用返回时，相应地分派一个动作，并由reducer 更新应用程序状态。

但是！组件NewGroup 不知道新创建实体的 id 以在更新状态下查找它。

我应该如何处理这种情况？

一些代码：

这是减速器：

import { FETCH_GROUPS_SUCCESS, FETCH_GROUPS_ERROR, CREATE_GROUP_SUCCESS, CREATE_GROUP_ERROR, DELETE_GROUP, FETCH_GROUP_SUCCESS, FETCH_GROUP_ERROR } from '../actions/creators';

export const FULL_GROUP = 'full_group';
export const SNIPPET_GROUP = 'snippet_group';

const INITIAL_STATE = {
  data: null,
  isLoading: true,
  errorFetching: null
};

export default function(state=INITIAL_STATE, action) {
  switch(action.type) {
    case FETCH_GROUPS_SUCCESS:
      return {
        data: _.zipObject(_.map(action.payload, group => group.id),
          _.map(action.payload, group => ({
              data: group,
              isLoading: true,
              errorFetching: null,
              mode: SNIPPET_GROUP
          }))
        ),
        isLoading: false,
        errorFetching: null
      };
    case FETCH_GROUPS_ERROR:
      return {
        data: null,
        isLoading: false,
        errorFetching: action.payload.error
      };
    case CREATE_GROUP_SUCCESS:
      return { ...state, [action.payload.id]: {
        data: action.payload,
        isLoading: true,
        errorFetching: null,
        mode: SNIPPET_GROUP
      }};
    case CREATE_GROUP_ERROR:
      return { ...state, [action.payload.id]: {
        data: null,
        isLoading: false,
        errorFetching: action.payload.error
      }};
    default:
      return state;
  }
}

这是NewGroup 组件：

class NewGroup extends Component {

  _onSubmit(values) {
    this.props.createGroup(values);
  }

  render() {
    const { handleSubmit } = this.props;
    //id of the newly created/errored entity on the backend is unknown and there was it cannot be accessed here.
    return (
      <div>
        <form onSubmit={handleSubmit(this._onSubmit.bind(this))}>
          <Field name="name" label="Name" type="text" fieldType="input" component={renderField.bind(this)}/>
          <Field name="description" label="Description" type="text" fieldType="input" component={renderField.bind(this)}/>
          <button type="submit" className="btn btn-primary">Create</button>
          <button type="button" className="btn btn-primary" onClick={() => this.props.history.push('/group')}>Cancel</button>
        </form>
      </div>
    );
  }
}

export default reduxForm({
  validate,
  //a unique id for this form
  form:'NewGroup',
  validators
})(
  connect(null, { createGroup })(NewGroup)
);

这是redux-form 的事实在这里并不重要。

Answer 1

您可以将 id 存储在您的 redux 存储中（例如，newAddedSomethingId: 'yourID'，一旦创建，在 POST 成功时，分派另一个操作（或者您甚至可以在同一个 reducer 中执行此操作，这取决于您如何拥有它设置）来存储 id 然后将其传递给组件。这样，一旦 redux 存储中的值从 POST 更新，您的组件将重新渲染，因此您的组件知道 ID。