как использовать асинхронные действия в реду

Question

Я хочу знать, когда мое действие завершило запрос, чтобы я мог обработать данные (Вид обещания).

Я использую thunk для отправки функции.

Вот мойaction

export function addUser(nom,url) {
    return (dispatch) =>{

        axios.post('/', {
            nom: nom,
            url: url
        })
            .then(function (response) {
                dispatch(()=>{//somthing for the reducer})
                console.log(response);

            })
}

и в моем компоненте я хочу выполнить что-то вроде этого

addUser('test','test')
.then() // do something after the addUser is executed

Answer 1

То, как мы это делаем, происходит в редуксе, отправляя действие на успех следующим образом:

const addUserSuccess = () => {
  return {
    type: 'ADD_USER_SUCCESS',
  }
}


export function addUser(nom,url) {
  return (dispatch) =>{

    axios.post('/', {
       nom: nom,
       url: url
    })
    .then(function (response) {
       dispatch(addUserSuccess());
       console.log(response);
     })
}

Теперь в вашем редукторе что-то вроде этого:

const initialState = { addedUser: false };

export default (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_USER_SUCCESS:
            return {
                ...state,
                addedUser: true
            };
        default:
            return state;
    }
}

Последнее, ноНе в последнюю очередь, подключите ваш компонент к магазину.

class ExampleComponent extends React.Component {
  componentDidMount() {
    addUser();
  }

  render() {
    if (props.addedUser) {
      // do something after the addUser is executed
    }

    return <div>Example</div>;
  }
}

const mapStateToProps = (state) => ({
    addedUser: state.user.addedUser
});
// connect is a react-redux HOC
const ConnectedComponent = connect(mapStateToProps)(ExampleComponent);

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

Обновление: если вам нужно работать с обещанием, вы можете сделать следующее:

export function addUser(nom, url) {
  return (dispatch) =>{

    return axios.post('/', {
       nom: nom,
       url: url
    })
    .then(function (response) {
       dispatch(addUserSuccess());
       console.log(response);
     })
}

Тогда вы можете использовать его в компоненте.

addUser()().then();

Просто убедитесь, что вызываете его дважды, потому что addUser () - это функция, которая возвращает функцию, которая возвращает обещание