reactjs - 在 Redux React 的另一个 Action 中调用一个 Action

Question

我正在 React 中学习 Redux。我正在使用 redux-thunk。我有一个像下面这样的 Action

export const login = (value, history) => dispatch => {
    Axios.post('/api/users/login', value)
        .then(response => {
            dispatch(getAddress()); // I am calling like this
        })
        .catch(error => {});
}

我的地址操作如下

export const getAddress = () => dispatch => {
    Axios.get('/api/address')
        .then(response => {
            dispatch({
                type: 'getAddresses',
                payload: response.data
            });
        })
        .catch(function (error) {});
}

我正在尝试在我的组件中显示值，如下所示

    render() {
        return (
           <div>Hello {console.log(this.props)}</div> // I am getting empty object
        );
    }


const mapStateToProps = state => ({
  addresses: state.address
});

export default connect(mapStateToProps)(Dashboard);

但我得到空对象。

我想在登录后将用户重定向到显示地址的仪表板。我怎样才能做到这一点 ？

Answer 1

Redux thunk 中间件允许通过 dispatch 链接, dispatch(...)返回分派(dispatch)的 Action ，即如果 promise 链没有被破坏，则返回一个 promise :

export const login = (value, history) => dispatch => {
    return Axios.post('/api/users/login', value) // return!
    .then(response => {
        return dispatch(getAddress()); // return!
    })
    .catch(error => {});
}

export const getAddress = () => dispatch => {
    return Axios.get('/api/address') // return!
    .then(response => {
        return dispatch({ // return!
            type: 'getAddresses',
            payload: response.data
        });
    })
    .catch(function (error) {});
}

初始操作应该在某处分派(dispatch)。在 vanilla Redux 设置中，它可以在 store 定义之后调度:

store.dispatch(login());

在 React Redux 设置中，组件是 Redux 数据流的组成部分。异步 thunk 是一种副作用，应该在 componentDidMount 中调度一次.在初始操作的情况下，它应该在父组件中调度:

@connect()
class App extends Component {
  componentDidMount() {
    return this.props.dispatch(login());
  }

  render() {
    return !this.props.addresses ? 'Loading' :  <Dashboard />
  }
}

这是 demo .