reactjs - 使用 redux saga 时等待 redux action 完成调度

Question

我有一个 redux saga 设置，运行良好。我的调度之一是创建一个新订单，然后一旦创建，我想用更新后的状态执行操作。

// this.props.userOrders = []

dispatch(actions.createOrder(object))

doSomethingWith(this.props.userOrders)

由于 createOrder 操作触发了调用 API 的 redux saga，因此存在延迟，因此在调用我的函数 doSomethingWith 之前不会更新 this.props.userOrders。我可以设置一个超时，但这似乎不是一个可持续的想法。

我已经阅读了 Stack Overflow 上的类似问题，并尝试实现相关的方法，但我似乎无法让它工作。我希望通过下面的代码，有人只需添加几行即可完成此操作。

以下是相关的其他文件:

actions.js

导出 const createUserOrder = (数据) => ({ 类型:'CREATE_USER_ORDER'， 数据 })

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

Api.js

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 Problem 。您不应该在任何时候在组件的生命周期函数/事件处理程序中“等待”，而应该利用存储的当前状态。

如果我理解正确的话，这是您当前的流程:

You dispatch an action CREATE_USER_ORDER in your React component. This action is consumed by your callCreateUserOrder saga. When your create order saga is complete, it dispatches another "completed" action, which you already have as CREATE_USER_ORDER_SUCCEEDED.

您现在应该添加适当的 reducer /选择器来处理您的CREATE_USER_ORDER_SUCCEEDED:

此 CREATE_USER_ORDER_SUCCEEDED 操作应由您的 reducer 处理，以创建一个新状态，其中填充您状态中的某些“订单”属性。这可以通过选择器直接连接到您的组件，此时您的组件将被重新渲染并填充 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)

<小时/>

reducer

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

<小时/>

如果您确实需要副作用，请将这些副作用添加到您的传奇中，或者创建一个采用 SUCCESS 操作的新传奇。