访问从redux thunk函数获取的数据的正确方法是什么？

Question

我目前正在使用此模式，但感觉有点不对劲。我不认为redux thunk应该返回字符串，并且组件只能访问通过连接的道具获取的数据。我可能是错的，但是有没有更好，更惯用的方式呢？

我想将两个thunk分开，以便可以分别给每个thunk打电话。

// actions
const putCustomer = ...;
const putBooking = ...;

// thunks
export async function fetchCustomer(customerId) {
  return dispatch => {
    const customer = await customerApi.fetch(customerId);
    dispatch(actions.putCustomer( {customer} ));
  };
}

export async function fetchBooking(bookingId) {
  return dispatch => {
    const booking = await bookingApi.fetch(bookingId);
    dispatch(actions.putBooking( {booking} ));

    // I AM RETURNING THE BOOKING DATA HERE
    return booking;
  };
}

// component
class MyComponent extends React.Component {
  async componentWillMount() {
    const booking = await this.props.dispatch(fetchBooking(this.props.bookingId));

    // I WANT TO ACCESS THE BOOKING DATA HERE
    this.props.dispatch(fetchCustomer(booking.customerId));
  }
}

问题已更新

• 在要访问数据的地方添加了一些注释

Answer 1

在理想情况下，下面是在调度某些动作时流程如何进行：

  

建议可以将UI绑定到状态，并且可以通过reducer修改状态，状态是单向流。您尝试返回的数据可以通过状态进行管理，调度员可以修改该状态