使用redux saga时，等待redux操作完成调度

Question

我有一个redux saga设置，工作正常。我的一个分派任务是创建一个新订单，然后一旦创建了订单，我就想用更新后的状态做一些事情。

// this.props.userOrders = []

dispatch(actions.createOrder(object))

doSomethingWith(this.props.userOrders)

由于 createOrder 操作触发调用 API 的重订传奇，因此存在延迟，因此在我的函数 do 之前不会更新此 .props.user 命令某些内容被调用。我可以设置一个超时，但这似乎不是一个可持续的想法。

我已经阅读了有关Stack Overflow的类似问题，并尝试在相关的地方实现方法，但我似乎无法让它工作。我希望通过下面的代码，有人可以添加几行就可以做到这一点。

以下是相关的其他文件:

actions.js

导出const createUserOrder=（数据）=

Sagas.js

function * createUserOrder () {
  yield takeEvery('CREATE_USER_ORDER', callCreateUserOrder)
}

export function * callCreateUserOrder (newUserOrderAction) {
  try {
    const data = newUserOrderAction.data
    const newUserOrder = yield call(api.createUserOrder, data)
    yield put({type: 'CREATE_USER_ORDER_SUCCEEDED', newUserOrder: newUserOrder})
  } catch (error) {
    yield put({type: 'CREATE_USER_ORDER_FAILED', error})
  }
}

阿皮耶斯

export const createUserOrder = (data) => new Promise((resolve, reject) => {
  api.post('/userOrders/', data, {headers: {'Content-Type': 'application/json'}})
    .then((response) => {
      if (!response.ok) {
        reject(response)
      } else {
        resolve(data)
      }
    })
})

订单减速机：

case 'CREATE_USER_ORDER_SUCCEEDED':
   if (action.newUserOrder) {
      let newArray = state.slice()
      newArray.push(action.newUserOrder)
          return newArray
       } else {
       return state
   }

Answer 1

这感觉是个XY问题。您不应该在任何时候“等待”组件的生命周期函数/事件处理程序，而是应该利用html" target="_blank">存储的当前状态。

如果我没理解错，这是你目前的流程：

在 React 组件中分派操作CREATE_USER_ORDER。此操作由您的呼叫创建用户订单传奇使用。当您的创建订单传奇完成时，它会调度另一个“已完成”操作，您已经CREATE_USER_ORDER_SUCCEEDED该操作。

您现在应该添加的是适当的减速器/选择器来处理您的CREATE_USER_ORDER_SUCCEEDED：

这个CREATE_USER_ORDER_SUCCEEDED操作应该由您的还原程序处理，以创建一个新的状态，其中填充了您状态中的一些“orders”属性。这可以通过选择器直接连接到您的组件，此时您的组件将被重新呈现并This.props。userOrders已填充。

例：

组件

class OrderList extends React.PureComponent {
  static propTypes = {
    userOrders: PropTypes.array.isRequired,
    createOrder: PropTypes.func.isRequired,
  }

  addOrder() {
    this.props.createOrder({...})
  }

  render() {
    return (
      <Wrapper>
        <Button onClick={this.addOrder}>Add Order</Button>
        <List>{this.props.userOrders.map(order => <Item>{order.name}</Item>)}</List>
      </Wrapper>
    )
  }
}

const mapStateToProps = state => ({
  userOrders: state.get('userOrders'),
})

const mapDispatchToProps = {
  createOrder: () => ({ type: 'CREATE_ORDER', payload: {} }),
}

export default connect(mapStateToProps, mapDispatchToProps)(OrderList)

减速机

case 'CREATE_USER_ORDER_SUCCEEDED':
  return state.update('userOrders',
    orders => orders.concat([payload.newUserOrder])
  )

如果你真的需要副作用，那么把这些副作用添加到你的传奇故事中，或者创建一个新的传奇故事，采取成功的行动。