一次响应API次调用多路由设计
React one time API call for multiple routes design
- 我是 React 的新手,正在尝试实现一个应用程序。基本上
我的应用程序有几条路线。每个
路由由同一组后端数据+一些 api 调用支持
特定于将后端数据属性作为 api 参数的路由。
所以我写了一个高阶组件来调用
API 检索后端数据,将状态存储在 redux store 中
将它作为道具传递给包装好的组件。
const withData = (WrappedComponent) => {
class DataWrapper extends Component {
constructor() {
this.state = {
c: {},
d: []
};
}
componentDidMount(){
this.props.fetchData();
}
componentWillReceiveProps(nextProps){
this.setState({
c: nextProps.data.CSubset,
d: nextProps.data.DSubset
});
}
render() {
return <WrappedComponent {...this.props} {...this.state}/>;
}
const mapStateToProps=(state)=>({
data:state.appData
});
return connect(mapStateToProps,{fetchData})(DataWrapper);
}
export default withData;
class AppComponent extends Component{
componentDidMount(){
this.props.fetchComponentSpecificData(c.dataAttribute);
}
render(){
return <div />;
}
}
export default connect(null,{fetchComponentSpecificData}(withData(AppComponent);
但问题是 API 被调用所有 routes.It 应该是一个
每个完整应用程序流程的时间。
- 组件特定的数据获取发生在公共后端数据可用之前,导致组件特定的 API 调用失败。
- 用户可以输入 URL 并启动
进入应用程序中的任何路线并且 API 必须只被调用
一次,HOC 必须系统地路由到正确的路由
基于数据。
请指教设计方法
我想说最 "Reacty" 的方法是在顶级组件的 componentWillMount
方法中实现全局 API 调用(例如,AppComponent
).现在,您已将它放在一个组件中,该组件将为应用程序的每个子组件安装,防止 API 调用在每次安装时被触发可能很棘手。
使用 HOC 将这些数据提供给应用程序的其他组件是个不错的主意,但它会使您的应用程序更加隐蔽,而且我不认为您获得了很多:您添加具有隐式行为的组件,而不是仅在 mapStateToProps 中添加一行。
在 API 全局 API 调用成功后 触发特定页面 API 调用非常棘手。您将需要一种方法来监视全局 API 调用已解决的事实,并且在 React/Redux 的思维方式中,这意味着调度一个动作。要异步分派操作,您将需要一个 Redux 中间件,例如 redux-thunk or redux-saga (I believe redux-thunk is a lot easier for beginners). Now, if you have a way to know whether or not the global API call is a success, you can wait for a specific action to be dispatched (say, GLOBAL_API_CALL_SUCCESS
). Now, this is the part where I'm doing myself a bit of publicity : I've written redux-waitfor-middleware,它允许您等待分派特定操作。如果你使用它,它可能看起来像这样:
export async function fetchComponentSpecificData() {
await waitForMiddleware.waitFor([GLOBAL_API_CALL_SUCCESS]);
// perform actual API call for this specific component here
}
我并不是说 waitFor 中间件是实现这一目标的最佳工具,但如果您是新手,它可能是最容易理解的!
- 我是 React 的新手,正在尝试实现一个应用程序。基本上 我的应用程序有几条路线。每个 路由由同一组后端数据+一些 api 调用支持 特定于将后端数据属性作为 api 参数的路由。
所以我写了一个高阶组件来调用 API 检索后端数据,将状态存储在 redux store 中 将它作为道具传递给包装好的组件。
const withData = (WrappedComponent) => { class DataWrapper extends Component { constructor() { this.state = { c: {}, d: [] }; } componentDidMount(){ this.props.fetchData(); } componentWillReceiveProps(nextProps){ this.setState({ c: nextProps.data.CSubset, d: nextProps.data.DSubset }); } render() { return <WrappedComponent {...this.props} {...this.state}/>; } const mapStateToProps=(state)=>({ data:state.appData }); return connect(mapStateToProps,{fetchData})(DataWrapper); } export default withData; class AppComponent extends Component{ componentDidMount(){ this.props.fetchComponentSpecificData(c.dataAttribute); } render(){ return <div />; } } export default connect(null,{fetchComponentSpecificData}(withData(AppComponent);
但问题是 API 被调用所有 routes.It 应该是一个 每个完整应用程序流程的时间。
- 组件特定的数据获取发生在公共后端数据可用之前,导致组件特定的 API 调用失败。
- 用户可以输入 URL 并启动 进入应用程序中的任何路线并且 API 必须只被调用 一次,HOC 必须系统地路由到正确的路由 基于数据。 请指教设计方法
我想说最 "Reacty" 的方法是在顶级组件的 componentWillMount
方法中实现全局 API 调用(例如,AppComponent
).现在,您已将它放在一个组件中,该组件将为应用程序的每个子组件安装,防止 API 调用在每次安装时被触发可能很棘手。
使用 HOC 将这些数据提供给应用程序的其他组件是个不错的主意,但它会使您的应用程序更加隐蔽,而且我不认为您获得了很多:您添加具有隐式行为的组件,而不是仅在 mapStateToProps 中添加一行。
在 API 全局 API 调用成功后 触发特定页面 API 调用非常棘手。您将需要一种方法来监视全局 API 调用已解决的事实,并且在 React/Redux 的思维方式中,这意味着调度一个动作。要异步分派操作,您将需要一个 Redux 中间件,例如 redux-thunk or redux-saga (I believe redux-thunk is a lot easier for beginners). Now, if you have a way to know whether or not the global API call is a success, you can wait for a specific action to be dispatched (say, GLOBAL_API_CALL_SUCCESS
). Now, this is the part where I'm doing myself a bit of publicity : I've written redux-waitfor-middleware,它允许您等待分派特定操作。如果你使用它,它可能看起来像这样:
export async function fetchComponentSpecificData() {
await waitForMiddleware.waitFor([GLOBAL_API_CALL_SUCCESS]);
// perform actual API call for this specific component here
}
我并不是说 waitFor 中间件是实现这一目标的最佳工具,但如果您是新手,它可能是最容易理解的!