2016-07-30 4 views
0

У меня есть приложение js для реагирования, в котором пользователь может создать пользователя, а затем я делаю сообщение http на бэкэнд.Где сделать Ajax звонки в React flux

У меня есть действие, которое выглядит как этот

export function createUser(name, username, password) { 
    dispatcher.dispatch({ 
    type: "CREATE_USER", 
    name, 
    username, 
    password, 
    }); 
} 

то в моем магазине я называю действием и вызывает функцию, которая делает HTTP POST для внутреннего интерфейса, который выглядит, как этот

handleActions(action) { 
    switch(action.type) { 
    case "CREATE_USER": { 
    this.createUser(action.name, action.username, action.password); 
     break; 
    } 
     default: 
    } 
    } 

должен ли я сделать вызов ajax в магазине или в самом действии?

ответ

0

Думаю, у нас должна быть отдельная папка с именем api. Там у нас будут все ави звонки. Мы можем вставить этот файл и вызвать эту функцию, где мы помещаем наши функции, которые вызывают api и реагируют на действия.

+0

Вы имеете в виду что-то вроде этого https://github.com/auth0-blog/react-flux-jwt-authentication-sample/blob/gh-pages/src/services/AuthService.js? –

+0

Точно. Мы следуем аналогичным. Beacuse Это отменит ваши вызовы api от переднего конца. Скажите, что вы используете mongodb. завтра вы перешли на постгресс. Тогда должна быть изменена только область проекта, называемая API. Все остальное будет таким, каким оно есть. –

1

Прежде всего, вы бы хотели, чтобы редукция-thunk давала вам возможность создавать действия, которые рассылают другие действия асинхронным способом.

После этого вы можете создать действие, которое совершает звонок на сервер, и в результате отправит новое действие, которое приведет к хранению новых данных. Например:

getData(param) { 
    return (dispatch) => { 
    dispatch(dataRequestAction()); 

    return fetch(`/data/${param}`) 
     .then(r => r.json()) 
     .then(data => dispatch(setDataAction(data))) 
     .catch(err => dispatch(errroDuringRataRetrieving(err))) 
    }; 
} 

, как вы видите здесь у вас есть одно действие (GetData), который на самом деле не меняет магазин, но триггер «dataRequestAction», который положил в для хранения данных, что запрос начался. Затем, если запрос завершен, одно из действий может быть активировано:

  • setDataAction - если все нормально;

  • errroDuringRataRetrieving - если запрос не выполнен.

Таким образом, вы можете обрабатывать ajax через redux.

Смежные вопросы