External module "withFxActions"

withFxActions

• withFxActions<Data, Params, Props>(Component: React.ComponentType<Props>): React.ComponentType<Subtract<Props, FxActionsProps<Data, Params>> & WithFxActionsProps<Data, Params>>

• withFxActions is a React high-order component factory that injects a unique fxActions prop into the given component. The given fxActions is a unique FxActionCreators instance representing the side-effect passed to the factory. The consumer has complete control over when the actions are dispatched, so is responsible for calling the effect, rendering the FxState, and cleaning up with destroy(). This makes it possible to access the fxActions in the ownProps parameter passed to mapStateToProps and mapDispatchToProps.

  The following example defines a connected component with the fxActions prop injected. The mapStateToProps function uses the given fxActions to access a unique FxState for the component. The mapDispatchToProps function wraps the call and destroy action creators with dispatch and passes them down to the underlying component.

  example

  // typeof Component: React.ComponentType<{ state: FxState, call: (...params) => void, destroy: () => void }>
  
  const mapStateToProps = (state, { fxActions }) => ({
    state: fxActions.selector(state)
  })
  const mapDispatchToProps = (dispatch, { fxActions }) => ({
    call: (...params) => dispatch(fxActions.call(...params)),
    destroy: () => dispatch(fxActions.destroy())
  })
  
  const Connected = connect(mapStateToProps, mapDispatchToProps)(Component)
  
  // typeof effect: (p1: number, p2: string) => Promise<string>
  const WithFxActions = withFxActions(effect)(Connected)

  Type parameters

  • Data

  • Params: any[]

  • Props: FxActionsProps<Data, Params>

  Parameters

  • Component: React.ComponentType<Props>

  Returns React.ComponentType<Subtract<Props, FxActionsProps<Data, Params>> & WithFxActionsProps<Data, Params>>