resolve-redux
This package contains tools for integrating reSolve with Redux.
📑
Table of Contents - createViewModelsReducer
- createReadModelsReducer
- createJwtReducer
- createResolveMiddleware
- connectViewModel
- connectReadModel
- connectStaticBasedUrls
- connectRootBasedUrls
- createStore
- createActions
- jwtProvider
- innerRef
- Action Creators
createViewModelsReducer
Generates a Redux reducer from reSolve View Models. Arguments:
createViewModelsReducer(viewModels)
createReadModelsReducer
Generates a Redux reducer using reSolve Read Models. Arguments:
createReadModelsReducer(readModels)
createJwtReducer
Generates a Redux reducer using a reSolve JWT. No arguments.
createJwtReducer()
createResolveMiddleware
Redux middleware is used to:
- Fetch View and Read Models
- Subscribe to events
- Send commands to the server side
import { createStore, applyMiddleware, combineReducers } from 'redux'
import { routerReducer, routerMiddleware } from 'react-router-redux'
import {
createViewModelsReducer,
createReadModelsReducer,
createJwtReducer,
createResolveMiddleware,
} from '@resolve-js/redux'
const resolveMiddleware = createResolveMiddleware()
const store = createStore(
combineReducers({
...reducers,
router: routerReducer,
viewModels: createViewModelsReducer(viewModels),
readModels: createReadModelsReducer(readModels),
jwt: createJwtReducer(),
}),
initialState,
applyMiddleware(routerMiddleware(history), resolveMiddleware, ...middlewares)
)
resolveMiddleware.run({
store,
viewModels,
readModels,
aggregates,
origin,
rootPath,
subscribeAdapter,
sessionId,
isClient,
})
connectViewModel
A higher-order component (HOC), used to automatically subscribe/unsubscribe to/from View Model updates, and access the aggregate commands by aggregateIds
.
import { connect } from 'react-redux'
import { connectViewModel, sendAggregateAction } from '@resolve-js/redux'
import { bindActionCreators } from 'redux'
const MyComponent = () => {
/* React component implementation */
}
const mapStateToOptions = (state, ownProps) => ({
viewModelName,
aggregateIds,
})
const mapStateToProps = (state, ownProps) => ({
items: ownProps.data,
})
const mapDispatchToProps = (dispatch, ownProps) =>
bindActionCreators(
{
commandName: sendAggregateAction.bind(
null,
'AggregateName',
'CommandName'
),
},
dispatch
)
export default connectViewModel(mapStateToOptions)(
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
)
connectReadModel
A higher-order component (HOC), used to automatically subscribe/unsubscribe to/from Read Model updates, and access the corresponding aggregate's commands.
import { connect } from 'react-redux'
import { connectReadModel, sendAggregateAction } from '@resolve-js/redux'
import { bindActionCreators } from 'redux'
const MyComponent = () => {
/* React component implementation */
}
const mapStateToOptions = (state, ownProps) => {
return {
readModelName: 'Items',
resolverName: 'getAllItems',
resolverArgs: {},
}
}
const mapStateToProps = (state, ownProps) => {
return {
items: ownProps.data,
}
}
const mapDispatchToProps = (dispatch, ownProps) =>
bindActionCreators(
{
commandName: sendAggregateAction.bind(
null,
'AggregateName',
'CommandName'
),
},
dispatch
)
export default connectReadModel(mapStateToOptions)(
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
)
connectRootBasedUrls
A higher-order component (HOC), used to automatically fixes server routes.
import React from 'react'
import { connectRootBasedUrls } from '@resolve-js/redux'
const Form = connectRootBasedUrls(['action'])('form')
const Markup = () => (
<div>
<From method="POST" action={action}>
username: <input type="text" name="username" />
<input type="submit" value="Submit" />
</From>
</div>
)
export default Markup
See also: innerRef
.
connectStaticBasedUrls
A higher-order component (HOC), used to automatically fixes paths for static files.
import React from 'react'
import { Image as BootstrapImage } from 'react-bootstrap'
import { connectStaticBasedUrls } from '@resolve-js/redux'
const Image = connectStaticBasedUrls(['src'])(BootstrapImage)
const Markup = () => (
<div>
<Image src="/logo.png" /> {name}
</div>
)
export default Markup
See also: innerRef
.
innerRef
Passing a ref
prop to a connected component will give you an instance of the wrapper, but not to the underlying DOM node. This is due to how refs work. It's not possible to call DOM methods, like focus
, on our wrappers directly.
To get a ref to the actual, wrapped DOM node, pass the callback to the innerRef
prop instead.
createStore
Generates a Redux store for a reSolve application. Arguments:
redux: { reducers, middlewares, store }
viewModels
readModels
aggregates
subscribeAdapter
history
origin
rootPath
isClient
- [
initialState
] - [
jwtProvider
]
createActions
Generates Redux actions using a reSolve aggregate. This function uses sendCommandRequest
to pass a command from Redux to the server side. The generated actions are named after the aggregate commands. Arguments:
-
aggregate
- reSolve aggregate -
extendActions
- actions to extend or redefine resulting actions
jwtProvider
Example for custom jwtProvider:
import { AsyncStorage } from 'react-native'
const jwtProvider = {
async get() {
return (await AsyncStorage.getItem(jwtCookie.name)) || ''
},
async set(jwt) {
return AsyncStorage.setItem(jwtCookie.name, jwt)
},
}
Action Creators
-
sendCommandRequest
Requests sending a command to the server side. The function takes one argument, which is an object with the following keys:
commandType
aggregateId
aggregateName
payload
-
sendCommandSuccess
Acknowledges sending a command to the server side. The function takes one argument, which is an object with the following keys:
commandType
aggregateId
aggregateName
payload
-
sendCommandFailure
Refuses sending the command to the server side. The function takes one argument, which is an object with the following keys:
commandType
aggregateId
aggregateName
payload
error
-
subscribeTopicRequest
Requests subscription to a topic. The function takes one argument, which is an object with the following keys:
topicName
topicId
-
subscribeTopicSuccess
Acknowledges subscription to a topic. The function takes one argument, which is an object with the following keys:
topicName
topicId
-
subscribeTopicFailure
Refuses subscription to a topic. The function takes one argument, which is an object with the following keys:
topicName
topicId
error
-
unsubscribeTopicRequest
Requests unsubscription from a topic. The function takes one argument, which is an object with the following keys:
topicName
topicId
-
unsubscribeTopicSuccess
Acknowledges unsubscription from a topic. The function takes one argument, which is an object with the following keys:
topicName
topicId
-
unsubscribeTopicFailure
Refuses unsubscription from a topic. The function takes one argument, which is an object with the following keys:
topicName
topicId
error
-
connectViewModel
Subscribes to a View Model change. The function takes one argument, which is an object with the following keys:
viewModelName
aggregateIds
aggregateArgs
-
disconnectViewModel
Unsubscribes from View Model changes. The function takes one argument, which is an object with the following keys:
viewModelName
aggregateIds
aggregateArgs
-
loadViewModelStateRequest
Requests a View Model from the server side. The function takes one argument, which is an object with the following keys:
viewModelName
aggregateIds
aggregateArgs
-
loadViewModelStateSuccess
Acknowledges fetching a View Model from the server side. The function takes one argument, which is an object with the following keys:
viewModelName
aggregateIds
aggregateArgs
result
timestamp
-
loadViewModelStateFailure
Refuses fetching a View Model from the server side. The function takes one argument, which is an object with the following keys:
viewModelName
aggregateIds
aggregateArgs
error
-
dropViewModelState
Clears a View Model. The function takes one argument, which is an object with the following keys:
viewModelName
aggregateIds
aggregateArgs
-
connectReadModel
Subscribes to Read Model changes. The function takes one argument, which is an object with the following keys:
readModelName
resolverName
resolverArgs
-
disconnectReadModel
Unsubscribes from Read Model changes. The function takes one argument, which is an object with the following keys:
readModelName
resolverName
resolverArgs
-
loadReadModelStateRequest
Requests a Read Model Resolver result from the server side. The function takes one argument, which is an object with the following keys:
readModelName
resolverName
resolverArgs
queryId
-
loadReadModelStateSuccess
Acknowledges fetching a Read Model Resolver result from the server side. The function takes one argument, which is an object with the following keys:
readModelName
resolverName
resolverArgs
queryId
result
timestamp
-
loadReadModelStateFailure
Refuses fetching a Read Model Resolver result from the server side. The function takes one argument, which is an object with the following keys:
readModelName
resolverName
resolverArgs
queryId
error
-
dropReadModelState
Clears a Read Model. The function takes one argument, which is an object with the following keys:
readModelName
resolverName
resolverArgs
-
authRequest
Requests authorization. It takes the object with the following required arguments:
url
body
-
authSuccess
Acknowledges authorization. The function takes one argument, which is an object with the following keys:
url
body
-
authFailure
Refuses authorization. The function takes one argument, which is an object with the following keys:
url
body
error
-
updateJwt
Sets a jwt. The function takes one argument, which is an object with the following keys:
jwt
-
logout
Clears a jwt and logout. No arguments.
export const updateJwt = jwt => ({ type: UPDATE_JWT, jwt })
-
dispatchTopicMessage
Dispatches the topic message. The function takes one argument, which is an object with the following keys:
message
-
hotModuleReplacement
Initiates Hot Module Replacement. The function takes one argument, which is an object with the following keys:
hotModuleReplacementId