@resolve-js/redux

The reSolve framework includes the client @resolve-js/redux library used to connect a client React + Redux app to a reSolve-powered backend. This library includes both React Hooks and Higher-Order Components (HOCs).

React Hooks

Function Name	Description
useReduxCommand	Creates a hook that executes a command.
useReduxReadModel	Creates a hook that queries a Read Model.
useReduxReadModelSelector	Creates a hook used to access a Read Model query result.
useReduxViewModel	Creates a hook used to subscribe to View Model updates.
useReduxViewModelSelector	Creates a hook used to access a View Model's state.

useReduxCommand

Creates a hook that executes a reSolve command.

Example

const { execute: toggleItem } = useReduxCommand({
  type: 'toggleShoppingItem',
  aggregateId: shoppingListId,
  aggregateName: 'ShoppingList',
  payload: {
    id: 'shopping-list-id',
  },
})

useReduxReadModel

Creates a hook that queries a Read Model.

Example

const { request: getLists, selector: allLists } = useReduxReadModel(
  {
    name: 'ShoppingLists',
    resolver: 'all',
    args: {
      filter: 'none',
    },
  },
  []
)

const { status, data } = useSelector(allLists)

useReduxReadModelSelector

Creates a hook used to access the result of a Read Model query. This hook allows you to access data queried by useReduxReadModel and does not send any requests to the server.

const { request: getLists, selector: allLists } = useReduxReadModel(
  {
    name: 'ShoppingLists',
    resolver: 'all',
    args: {
      filter: 'none',
    },
  },
  [],
  {
    selectorId: 'all-user-lists',
  }
)

const { status, data } = useReduxReadModelSelector('all-user-lists')

useReduxViewModel

Creates a hook used to subscribe to View Model updates.

const { connect, dispose, selector: thisList } = useReduxViewModel({
  name: 'shoppingList',
  aggregateIds: ['my-list'],
})

const { data, status } = useSelector(thisList)

useEffect(() => {
  connect()
  return () => {
    dispose()
  }
}, [])

useReduxViewModelSelector

Creates a hook used to access a View Model's state. This hook queries the View Model's state on the client and does not send any requests to the server.

const { connect, dispose, selector: thisList } = useReduxViewModel(
  {
    name: 'shoppingList',
    aggregateIds: ['my-list'],
  },
  {
    selectorId: 'this-list',
  }
)

const { data, status } = useReduxViewModelSelector('this-list')

Higher-Order Components

Function Name	Description
connectViewModel	Connects a React component to a reSolve View Model.
connectReadModel	Connects a React component to a reSolve Read Model.
connectRootBasedUrls	Fixes URLs passed to the specified props so that they use the correct root folder path.
connectStaticBasedUrls	Fixes URLs passed to the specified props so that they use the correct static resource folder path.

connectViewModel

Connects a React component to a reSolve View Model.

Example

export const mapStateToOptions = (state, ownProps) => {
  const aggregateId = ownProps.match.params.id

  return {
    viewModelName: 'ShoppingList',
    aggregateIds: [aggregateId],
  }
}

export const mapStateToProps = (state, ownProps) => {
  const aggregateId = ownProps.match.params.id

  return {
    aggregateId,
  }
}

export const mapDispatchToProps = (dispatch) =>
  bindActionCreators(
    {
      replaceUrl: routerActions.replace,
    },
    dispatch
  )

export default connectViewModel(mapStateToOptions)(
  connect(mapStateToProps, mapDispatchToProps)(ShoppingList)
)

connectReadModel

Connects a React component to a reSolve Read Model.

Example

import { sendAggregateAction } from '@resolve-js/redux'
import { bindActionCreators } from 'redux'

export const mapStateToOptions = () => ({
  readModelName: 'ShoppingLists',
  resolverName: 'all',
  resolverArgs: {},
})

export const mapStateToProps = (state, ownProps) => ({
  lists: ownProps.data,
})

export const mapDispatchToProps = (dispatch) =>
  bindActionCreators(
    {
      createStory: sendAggregateAction.bind(null, 'Story', 'createStory'),
    },
    dispatch
  )

export default connectReadModel(mapStateToOptions)(
  connect(mapStateToProps, mapDispatchToProps)(MyLists)
)

connectRootBasedUrls

Fixes URLs passed to the specified props and ensures they use the correct root folder path.

Example

export default connectRootBasedUrls(['href'])(Link)

connectStaticBasedUrls

Fixes URLs passed to the specified props to correct the static resource folder path.

Example

export default connectStaticBasedUrls(['css', 'favicon'])(Header)