Question

我有一个react-redux应用程序，它包含一个表示数据的表组件和一个通过下拉列表过滤数据的过滤器组件。我需要更改我的应用程序，以便每次使用下拉列表进行选择时，我都可以从后端接收数据。我有以下内容：组件，reducer，action creators，mapStateToProps和mapDispatchToProps。我应该在哪个国家打电话给后端？

Answer 1

您可以使用redux midleware在您的操作中公开api客户端。

我的redux midleware：

export default function clientMiddleware(client) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState);
    }

    const { promise, types, ...rest } = action; // eslint-disable-line no-redeclare
    if (!promise) {
      return next(action);
    }

    const [REQUEST, SUCCESS, FAILURE] = types;
    next({ ...rest, type: REQUEST });

    const { auth } = getState();

    client.setJwtToken(auth.token || null);

    const actionPromise = promise(client, dispatch);
    actionPromise.then(
      result => next({ ...rest, result, type: SUCCESS }),
      error => next({ ...rest, error, type: FAILURE })
    ).catch((error) => {
      console.error('MIDDLEWARE ERROR:', error);
      next({ ...rest, error, type: FAILURE });
    });

    return actionPromise;
  };
}

用于行动：

const SAVE = 'redux-example/widgets/SAVE';
const SAVE_SUCCESS = 'redux-example/widgets/SAVE_SUCCESS';
const SAVE_FAIL = 'redux-example/widgets/SAVE_FAIL';

export function save(widget) {
  return {
    types: [SAVE, SAVE_SUCCESS, SAVE_FAIL],
    id: widget.id, // additionnal data for reducer
    promise: client => client.post('/widget/update', {
      data: widget
    })
  };
}

// in reducer:
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case SAVE:
      return state;
    case SAVE_SUCCESS:
      // you can use action.result and action.id here
      return state;
    case SAVE_FAIL:
      // and you can use action.error and action.id here
      return state;
    default:
      return state;
  }
}

最后，您必须使用mapDispatchToProps将此操作传递给您的组件。

希望能帮到你

Answer 2

我使用redux-api-middleware https://github.com/agraboso/redux-api-middleware 基于丹阿布拉莫夫的例子。

从React Redux调用后端

2 个答案: