我已经开始学习React / Redux,偶然发现了可能是一个非常基本的问题。以下是我的应用程序中的代码段,为简单起见删除了一些代码。
我的状态由一系列网站描述,默认情况下为空。LOAD_SITES每当用户分页到其他页面时,以后的reducer就会采取措施加载不同的网站集,但目前它什么也没做。React从渲染开始PublishedSitesPage,然后渲染,然后渲染PublishedSitesBox然后遍历数据并渲染各个站点。
LOAD_SITES
PublishedSitesPage
PublishedSitesBox
我想要做的是让它使用默认的空数组呈现所有内容,同时启动“从服务器加载站点”承诺,并在解决后立即调度LOAD_SITES操作。拨打电话的最佳方法是什么?我在想的任何构造PublishedSitesBox或者可能componentDidMount。但是不确定这是否行得通- 我担心的是,我将以这种方式创建一个无限循环,以保持重新渲染。我想我可以通过沿“ haveRequestedInitialData”行设置一些其他状态参数来以某种方式防止此无限循环。我的另一个想法是做完后马上做出这个承诺ReactDOM.render()。最佳和最干净的方法是什么?
componentDidMount
ReactDOM.render()
export default function sites(state = [], action) { switch (action.type) { default: return state; } } ... const publishedSitesPageReducer = combineReducers({ sites }); ReactDOM.render( <Provider store={createStore(publishedSitesPageReducer)}> <PublishedSitesPage /> </Provider>, this.$view.find('.js-published-sites-result-target')[0] ); ... export default function PublishedSitesPage() { return ( <PublishedSitesBox/> ); } ... function mapStateToProps(state) { return { sites: state.sites }; } const PublishedSitesBox = connect(mapStateToProps)(({sites}) => { // render sites });
这种数据加载逻辑完全没有理由接触您的React组件。您在这里想要返回的诺言是将操作分派给您的reducer,后者对存储进行适当的更改,然后使React组件适当地重新呈现。
(无论在调用ReactDOM.render之前还是之后启动异步调用都没有关系; promise会以任何一种方式起作用)
像这样:
var store = createStore(publishedSitesPageReducer); someAsyncCall().then(function(response) { store.dispatch(someActionCreator(response)); }); ReactDOM.render( <Provider store={store}> <PublishedSitesPage /> </Provider>, this.$view.find('.js-published-sites-result-target')[0] );
您的React组件是商店的使用者,但是没有规则要求它们必须是商店的唯一使用者。