Общий метод полей магазина

Question

Мотивация

Я сохраняю учетные данные пользователя в избыточном хранилище Они заполняются, когда пользователь входит в систему. Я хотел бы использовать метод многократного использования для извлечения данных с использованием имени пользователя и пароля пользователя.

---

Штат / аутентификация

const initState = {
    isLoading: false,
    user: undefined,
    auth_err: false
};

Моя попытка

const fetchData = props => async (url, method, body) => {

    try {
        const response = await fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic ' + Base64.btoa(props.user.username + ":" + props.user.password)
            },
            body: body
        });
        console.log(response);
        return response;
    } catch (err) {
        console.log(err);
    }
};

const mapStateToProps = state => {
    return {
        user: state.auth.user
    }
};

export const SENDREQUEST = connect(mapStateToProps)(fetchData);

Звоните

const response = await SENDREQUEST("http://localhost:8080/users", "GET");

Но как только я это называю, я получаю:

TypeError: Невозможно вызвать класс как функцию

---

Можно ли вообще создать такой? Любая помощь будет оценена и сердца;

Answer 1

Я предполагаю, что вы знаете о Redux и его промежуточном программном обеспечении.

Прежде всего ошибка возникает при передаче fetchData возвращаемого значения connect: connect возвращает функцию, которая является HOC : принимает компонент, возвращает компонент, который является class здесь, который не может быть вызван как функция, как вы.

Решением вашей проблемы является использование mapDispatchToProps и промежуточного программного обеспечения, примерно так:

class LoginFormPresenter {
  render () {
    // render your login
    return <form onSubmit={this.props.logUser}></form>
  }
}

// This makes the LoginFormPresenter always receive a props `logUser`
const LoginFormConnector = connect((state => { user: state.user }), {
  logUser: (e) => (
    // create a credentials object by reading the form
    const credentials = ...;

    // return a valid redux action
    return {
      type: "LOGIN",
      credentials
    };
  )
});
const LoginForm = LoginFormConnector(LoginFormPresenter);

// Create an ad hoc middleware
//
const middleware = ({ dispatch, getState }) => next => action => {

  if (action.type === "LOGIN") {
    // log your user
    fetch()
      .then(user => next({ type: "LOGIN", user }));

    return next({ type: "PROCESSING_LOGIN" }); // indicate to redux that you are processing the request
  }
  // let all others actions pass through
  return next(action);


};

Итак, механизм работает так:

• LoginFormConnector вставит реквизит logUser в любой компонент, к которому он применяется. Этот реквизит является функцией, которая отправляет действие с учетными данными вашего пользователя. Он также добавит user реквизитов, взятых из избыточного состояния, чтобы вы могли показать своего пользователя.
• Внутри избыточного промежуточного программного обеспечения вы ловите действие и используете ваш общий fetchData для обработки запроса. Когда запрос разрешен, вы отправляете действие в редуктор и обновляете его. В самом компоненте не происходит выборка данных, все обрабатывается на уровне промежуточного программного обеспечения.