【发布时间】：2023-04-05 23:37:01
【问题描述】：
我正在使用Redux 和React-router 制作一个简单的邮件应用程序。由于我对 Redux 比较陌生，所以我不太了解 Redux + Router 中的实际数据流。
我想要得到什么
- 页面启动后 (
/)，MailListComponent 从服务器获取消息数组。此时 MessageComponent 没有显示，因为它没有一条消息可以为其获取数据。 - 获取
state.messages:[]后，应用导航到state.messages:[](/messages/1) 的第一条消息。 - 转换完成后，MessageComponent 会显示并获取 id=1 信息的消息，它在单独的请求中作为附件。
这是组件模型：
我在做什么
// MailListActions.js
export function loadMessages() {
return {
type: 'LOAD_MESSAGES',
promise: client => client.get('/messages')
};
}
// MailListReducer.js
import Immutable from 'immutable';
const defaultState = { messages: [], fetchingMessages: false };
export default function mailListReducer(state = defaultState, action = {}) {
switch (action.type) {
case 'LOAD_MESSAGES_REQUEST':
return state.merge({fetchingMessages: true});
case 'LOAD_MESSAGES':
return state.merge({fetchingMessages: false, messages: action.res.data || null});
case 'LOAD_MESSAGES_FAILURE':
// also do something
default:
return state;
}
}
当我使用 promiseMiddleware、LOAD_MESSAGES、LOAD_MESSAGES_REQUEST 和 LOAD_MESSAGES_FAILURE 时，请求 /messages 结束时被调度。
现在：
- 可以在 MailListComponent 的 componentDidMount 中 dispatch
loadMessages()吗？ - 应该如何正确转换为
/messages/1？ - 我应该在我的州创建
activeMessageId<Integer>吗？ - 所有这些组件应该如何与 React-Router 连接？
这是我目前的尝试：
export default (store) => {
const loadAuth = (nextState, replaceState, next) => { ... };
return (
<Route name="app" component={App} path="/" onEnter={loadAuth}>
<IndexRoute component={Content}/> // <== THIS IS A DUMMY COMPONENT. It diplays pre-loader until the app is transitioned to real first message
<Route path="messages/:id" component={Message}/>
</Route>
);
};
您能否提供一些要点，如何连接这些点？ poper异步数据流逻辑是什么？
我使用isomorphic-redux 示例作为我的应用程序的基础。虽然是同构的，但和普通的 Redux 应用应该差别不大
谢谢。
更新
其中一个想法 - 为<IndexRoute component={Content}/> 设置 onEnter 钩子，它将获取消息，设置为状态和初始转换。是redux+router的方式吗？
但是，这种方式也可能相当棘手，因为/messages 仅适用于经过身份验证的用户（其中store.getState().auth.get('loaded') == true）
【问题讨论】：
-
我在下面回答了一个对我们来说效果很好的解决方案（非常相似的情况/功能）。我省略了大部分与 redux 操作/reducer 相关的代码，因为您上面解释的内容很好地涵盖了这一点。简短的版本是：组件生命周期对我们来说运行良好。这会导致在访问“messages/”时延迟加载消息、直接导航到消息等......我很想知道你在哪里登陆！
标签： reactjs react-router redux