javascript - 如何在 redux 中使用异步操作

Question

我想知道我的操作何时完成请求，以便我可以处理数据(有点像 promise )。

我正在使用 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

我们在 redux 中这样做的方式是在成功时分派(dispatch)一个 Action ，如下所示:

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

现在在你的 reducer 中是这样的:

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

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

更新: 如果您想改用 promise，您可以执行以下操作:

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 的函数