Question

我想知道我的行动何时完成了请求，以便我可以处理数据（一种Promise）。

我正在使用thunk来调度功能。

这是我的动作

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

在redux中，我们这样做的方法是对成功进行调度，如下所示：

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);

我知道这是很多样板，但这只是一个非常基本的概述。在redux文档中的Async Actions中找到更多信息。

更新：如果您改为使用诺言，则可以执行以下操作：

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（）是一个返回返回promise的函数的函数

如何在Redux中使用Asyn动作

1 个答案: