Reactjs 从当前页面重新复制向上传递/刷新状态

我有一个react应用程序，我想使用redux来普遍存储状态，以便根应用程序可以访问它

例如：一个页面具有填充该页面的GETAPI调用。这一切都很好，但我对如何做几件事感到困惑

我如何在redux操作中使用变量，让操作返回模型的ID，并让它返回模型API返回json。 然后如何向上传递该状态，以便更高顺序的组件（如base App.js）可以访问该状态，以便在导航中使用当前页面中的变量。 更新redux状态的最佳方式/时间是什么/什么时候，以便在使用redux状态的任何地方反映更改？ 特别是在这个项目中：如果您在localhost/spells/X上，X是模型ID，那么在本例中，如何将状态从该页面的容器组件LayoutSpellView向上传递到MaterialUIApp

index.js
  |--App.js
     |--MaterialUiApp
        |--Router
           |--LayoutSpellView (pass state up to MaterialUiApp)

---

使用Redux，您不会向上或向下传递状态。使用动作创建者和还原器更新全局状态。只要需要达到该状态，就可以将组件连接到该状态并使用它。您有一个存储，它包含一个全局状态。该全局状态可能包含多个不同的状态

您可以在操作创建者中使用有效负载或任何其他名称、变量。在减速机中，您可以获得带有action.payload、action.id等的减速机

正如我在第一段中所解释的，您可以随时更新您的状态。之后，您可以在任何需要的地方将任何组件连接到您的状态

没有最好的时间或最好的方式来做到这一点。这取决于您的代码和应用程序逻辑

当然也有一些最佳实践，但我们不能把它们说得那么宽泛。在你参与Redux之后，你会看到他们中的一些。例如，我说过，我们不会用Redux在州内上下传递信息。这是真的，但有时为了避免组件周围有太多连接，我们使用容器应用程序，将该应用程序连接到存储，然后通过存储实际到达状态，然后将相关状态部分传递给相关组件

---

我推荐Redux自己的文档作为起点：

使用Redux，您不会向上或向下传递状态。使用动作创建者和还原器更新全局状态。只要需要达到该状态，就可以将组件连接到该状态并使用它。您有一个存储，它包含一个全局状态。该全局状态可能包含多个不同的状态

您可以在操作创建者中使用有效负载或任何其他名称、变量。在减速机中，您可以获得带有action.payload、action.id等的减速机

正如我在第一段中所解释的，您可以随时更新您的状态。之后，您可以在任何需要的地方将任何组件连接到您的状态

没有最好的时间或最好的方式来做到这一点。这取决于您的代码和应用程序逻辑

当然也有一些最佳实践，但我们不能把它们说得那么宽泛。在你参与Redux之后，你会看到他们中的一些。例如，我说过，我们不会用Redux在州内上下传递信息。这是真的，但有时为了避免组件周围有太多连接，我们使用容器应用程序，将该应用程序连接到存储，然后通过存储实际到达状态，然后将相关状态部分传递给相关组件

---

我推荐Redux自己的文档作为起点：

为了帮助您查看数据流，这里有一个关于所有内容如何联系在一起的草图。在下面的示例代码中，这是数据流：

单击“加载注释”按钮将发送一个带有参数userId的thunk。A是一个异步操作

thunk使用userId进行异步调用，然后发送一个操作setCommentscomments，并将收到的注释作为其有效负载

Comments reducer捕获该操作并使用Comments数组更新Redux状态

用于更新MapStateTops中注释的容器

组件接收更新的注释，并将其显示在

//actions.js export const SET_COMMENTS=MyApp/setComments； export const setComments=comments=>{ 类型：设置注释， 有效载荷：评论 }; //thunks.js 从“/actions”导入{setComments}； export const getCommentsAsync=id=>dispatch=>{ 返回轴 .得到`http://localhost:5000/comments/${id}` .thencomments=>dispatchsetCommentscomments； }; //reducer.js 从“./actions”导入{SET_COMMENTS}； 常量初始状态={ 评论：[] }; export const reducer=state=initialState，action=>{ 开关动作类型{ 案例集注释： const comments=action.payload； 返回{ 状态 评论 }; 违约： 返回状态； } }; //components.js 导出默认函数CommentsList{comments，loadComments，userId}{ 回来 {comments.mapcomment=>{comment.body} loadCommentsuserId}>加载注释 ; } //containers.js 从react redux导入{connect}； 从./thunks导入{getCommentsAsync}； 从./components导入评论列表； mapStateToProps=状态=>{ 评论：state.comments， userId:state.user.id }; mapDispatchToProps={ loadComments:getCommentsAsync }; 导出默认的ConnectMapStateTrops、mapDispatchToPropsCommentsList；

---

为了帮助您查看数据流，这里有一个关于所有内容是如何联系在一起的草图。在下面的示例代码中，这是数据流：

单击“加载注释”按钮将发送一个带有参数userId的thunk。A是一个异步操作

thunk使用userId进行异步调用，然后发送一个操作setCommentscomments，并将收到的注释作为其有效负载

Comments reducer捕获该操作并使用Comments数组更新Redux状态

用于更新MapStateTops中注释的容器

组件接收更新的注释，并将其显示在

//actions.js export const SET_COMMENTS=MyApp/setComments； export const setComments=comments=>{ 类型：设置注释， 有效载荷：评论 }; //thunks.js 从“/actions”导入{setComments}； export const getCommentsAsync=id=>dispatch=>{ 返回轴 .得到`http://localhost:5000/comments/${id}` .thencomments=>dispatchsetCommentscomments； }; //reducer.js 从“./actions”导入{SET_COMMENTS}； 常量初始状态={ 评论：[] }; export const reducer=state=initialState，action=>{ 开关动作类型{ 案例集注释： const comments=action.payload； 返回{ 状态 评论 }; 违约： 返回状态； } }; //components.js 导出默认函数CommentsList{comments，loadComments，userId}{ 回来 {comments.mapcomment=>{comment.body} loadCommentsuserId}>加载注释 ; } //containers.js 从react redux导入{connect}； 从./thunks导入{getCommentsAsync}； 从./components导入评论列表； mapStateToProps=状态=>{ 评论：state.comments， userId:state.user.id }; mapDispatchToProps={ loadComments:getCommentsAsync }; 导出默认的ConnectMapStateTrops、mapDispatchToPropsCommentsList；