如何在 React Native 中编写和建模可重用的业务逻辑
How to write and model a Reusable Business Logic in React Native
我必须使用 React Native 开发 5 个不同的移动应用程序。
应用程序背后的业务需求是相同的,它们应该连接到相同的 RESTful api,但每个应用程序都会有不同的 UI/UX 来满足品牌需求。
为应用程序实现极端可重用业务逻辑代码的最佳实践是什么。
我应该将 Redux 作为外部节点包并将其导入每个应用程序,还是应该将应用程序合并到一个巨大的代码库中并使用不同的 nodejs 脚本来构建它们中的每一个?
我的建议是分离业务逻辑。当您计划使用 Redux 时,您可以将模型和服务创建到一个单独的包中,然后将其导入到您需要的任何地方。
模型 - 定义状态,包含缩减器和效果。
服务 - 调用 RestFul API 的实际功能。
模型 <--> 服务方法非常有用,因为它们根本不做任何 UI 事情。
请参阅下面的模型和服务示例:
型号:
import {
addPayment
} from '../services/paymentService'
import {
updateAge
} from '../services/profileService'
export default {
namespace: 'myProfile',
state: {
age
},
reducers: {
set: (state, {payload: details}) => {
return ({...state, ...details})
},
},
effects: {
*getAge (action, { call, put, simplePut }) {
const {payload: age} = action
try {
const res = yield call(upadteAge, age)
const { status } = res
if (status === 200) {
const json = yield res.json()
yield simplePut('set', json)
}
} catch (error) {
console.log(error)
}
},
}
服务:
export function updateAge ({age}) {
return fetch('apiurl?age=' + age, {
method: 'POST',
headers: {
}
})
}
我最近完成了一个应用程序,我在其中使用了上述方法并且效果非常好。
我必须使用 React Native 开发 5 个不同的移动应用程序。 应用程序背后的业务需求是相同的,它们应该连接到相同的 RESTful api,但每个应用程序都会有不同的 UI/UX 来满足品牌需求。 为应用程序实现极端可重用业务逻辑代码的最佳实践是什么。
我应该将 Redux 作为外部节点包并将其导入每个应用程序,还是应该将应用程序合并到一个巨大的代码库中并使用不同的 nodejs 脚本来构建它们中的每一个?
我的建议是分离业务逻辑。当您计划使用 Redux 时,您可以将模型和服务创建到一个单独的包中,然后将其导入到您需要的任何地方。
模型 - 定义状态,包含缩减器和效果。 服务 - 调用 RestFul API 的实际功能。
模型 <--> 服务方法非常有用,因为它们根本不做任何 UI 事情。
请参阅下面的模型和服务示例:
型号:
import {
addPayment
} from '../services/paymentService'
import {
updateAge
} from '../services/profileService'
export default {
namespace: 'myProfile',
state: {
age
},
reducers: {
set: (state, {payload: details}) => {
return ({...state, ...details})
},
},
effects: {
*getAge (action, { call, put, simplePut }) {
const {payload: age} = action
try {
const res = yield call(upadteAge, age)
const { status } = res
if (status === 200) {
const json = yield res.json()
yield simplePut('set', json)
}
} catch (error) {
console.log(error)
}
},
}
服务:
export function updateAge ({age}) {
return fetch('apiurl?age=' + age, {
method: 'POST',
headers: {
}
})
}
我最近完成了一个应用程序,我在其中使用了上述方法并且效果非常好。