如何在redux中路由时将redux存储发送给客户端

在Redux中，要将Redux存储发送给客户端，可以通过以下步骤实现：

首先，确保你已经安装了redux和react-redux库，并在应用程序中正确配置了Redux存储。
在客户端的入口文件中，通常是index.js或App.js，导入所需的Redux相关库和组件。例如：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers'; // 导入根Reducer

import App from './App';

const store = createStore(rootReducer); // 创建Redux存储

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

在路由组件中，确保你已经安装了react-router或其他路由库，并正确配置了路由。在需要发送Redux存储给客户端的路由组件中，可以使用react-redux提供的connect函数连接Redux存储。例如：

import React from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ reduxState }) => {
  // 在这里使用Redux存储的状态
  return (
    <div>
      <h1>{reduxState.title}</h1>
      {/* 其他组件内容 */}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    reduxState: state // 将整个Redux存储映射到组件的props中
  };
};

export default connect(mapStateToProps)(MyComponent);

在服务器端，确保你已经安装了Node.js和Express等相关库，并正确配置了服务器。在处理路由的服务器端代码中，将Redux存储的状态作为初始数据传递给客户端。例如：

import express from 'express';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers'; // 导入根Reducer
import App from './App';

const app = express();

app.get('/', (req, res) => {
  const store = createStore(rootReducer); // 创建Redux存储

  const appMarkup = renderToString(
    <Provider store={store}>
      <App />
    </Provider>
  );

  const initialReduxState = store.getState(); // 获取Redux存储的状态

  res.send(`
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${appMarkup}</div>
        <script>
          // 将Redux存储的状态作为初始数据传递给客户端
          window.__INITIAL_REDUX_STATE__ = ${JSON.stringify(initialReduxState)}
        </script>
        <script src="client.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在客户端的入口文件中，获取服务器端传递的初始Redux存储状态，并将其作为参数传递给createStore函数。例如：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers'; // 导入根Reducer
import App from './App';

const initialState = window.__INITIAL_REDUX_STATE__; // 获取服务器端传递的初始Redux存储状态

const store = createStore(rootReducer, initialState); // 使用初始状态创建Redux存储

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

通过以上步骤，你可以在Redux中路由时将Redux存储发送给客户端，并在客户端上使用相同的Redux存储状态。这样可以确保在客户端上进行路由切换时，Redux存储的状态保持一致，从而实现数据的持久化和同步。

除了reac路由器外，Redux路由器还有什么用途？

、、

当我浏览redux-路由器的文档时，我只是不明白为什么我们需要它？ React路由器是一个非常棒的路由库，但缺点之一是它抽象出了一个非常关键的应用程序状态--当前路由！这种抽象对于路由匹配和呈现非常有用，但是用于与路由器交互的API触发转换，以及( 2)对组件生命周期中的状态变化作出反应，这还不尽如人意。事实证明，我们已经用Flux (和Redux)解决了这些问题:我们使用动作创建者触发状态更改，并使用高

浏览 5提问于2015-10-31得票数 1

回答已采纳

1回答

响应服务器端呈现呈现不正确的内容

、、、、

我正在开发一个使用React、Redux和Router路由器的rendering应用程序，服务器端呈现(使用express)。我面临的问题有点难以解释。我将尝试在以下步骤解释它。快速服务器将发送正确的内容，其中包括正确的页面源和DOM(从铬元素面板)作为初始加载。然后，让我们导航到另一个页面，比如 (导航并不会导致页面刷新，因为它是一个单一的页面应用程序，只有当您使用浏览器进行刷新或从浏览器地址栏中的URL输入页面时，它才会到达服务器获取SSR内容)。使用cmd +r或刷新浏览器<em

浏览 1提问于2017-08-30得票数 1

回答已采纳

1回答

如何在redux中路由时将redux存储发送给客户端

、、、、

所以我是nextjs的新手，在路由之后，我无法在新构建的页面上保持已调度状态。请问我们如何保持状态。基本上我有一个侧边栏，我试图保持活动按钮的状态。我尝试使用getInitialProps来获取url查询，并使用useEffect来消除加载操作，但是redux存储仍然是空的。

浏览 25提问于2020-07-15得票数 1

回答已采纳

3回答

混乱反应-路由器-域和反应-路由器-redux

、、、、

我是新的反应和还原，我开始了我的项目与反应-路由器-多姆，现在我正在寻找添加redux在混合。是否将所有Link组件切换到将操作分派到存储区的元素？谢谢你的帮助。

浏览 3提问于2017-09-17得票数 3

回答已采纳

3回答

react-router和react-router redux有什么区别？

、、、

我正在创建一个简单的应用程序，并使用react-router进行路由，现在我使用redux进行状态管理。我想知道要在我的应用程序中实现的react-router和react-router-redux之间的区别。提前谢谢。

浏览 0提问于2018-02-06得票数 1

1回答

如何在react中处理URL参数

、

我在reactJ中有一个应用程序，使用redux和路由器。如果这个问题更多地是关于逻辑而不是代码，我很抱歉，但是这个问题非常狭窄。，每个类别将设置如下路线：/:category1/:item1有超过50种不同的路线，我把它们都设置在我的路由器我面临的问题是当用户重新加载浏览器或直接访问链接时。因为所有这些路径实际上都是ids，所以如果我访问例如/:ca

浏览 3提问于2020-03-18得票数 1

回答已采纳

1回答

服务器端呈现与节点/反应。如何获取数据？

、、

我的目标是服务器端呈现使用Node和React/Redux构建的。我正在学习教程，并以项目为例。示例使用的是函数，它似乎在告诉存储区分派操作，并返回填充了数据(？)的存储。但是它在我头上飞得很远，我不知道它是如何工作的，当我复制代码时，商店仍然是空的。你能帮我理解一下这是怎么回事吗？我需要做些什么来告诉存储执

浏览 2提问于2017-04-22得票数 0

回答已采纳

2回答

如何执行删除操作？

、、、、

在客户端。现在，我对后端执行删除请求，以删除id "001“的产品。现在，我应该从后端获得要显示的产品更新列表，还是应该从商店筛选出全局可用的状态？我想知道最佳的方法。

浏览 5提问于2022-09-01得票数 -1

3回答

在与Redux的反应中，为什么需要routerReducer

、

在调用routerReducers时，我可以看到一些示例项目正在使用combineReducers()。import { combineReducers } from 'redux' import posts

浏览 5提问于2016-12-30得票数 1

回答已采纳

2回答

为React应用程序存储获取的数据的常用方法？

、、、

当用户登录时，他们的帐户信息应该是他们可以访问的。一旦用户登录，应用程序将获取用户的帐户信息(例如，使用fetch API )，然后可以将帐户信息保存在应用程序的状态中，例如使用Redux.。是由应用程序在登录后获取帐户信息，还是由服务器自动将数据发送到客户端？Redux是存储此类数据的适当工具，还是localSt

浏览 3提问于2020-10-15得票数 1

回答已采纳

1回答

reactjs中的redux是什么？以及如何快速采用这一反应还原？

最近，我了解到了reactjs中的redux。我们怎么才能从redux开始？

浏览 10提问于2021-12-27得票数 -1

回答已采纳

1回答

React-redux客户端令牌

、、、、

我正在构建一个React-redux spa，并且我正在使用一个构建在node + express + jwt-simplea模块和passport.js之上的API。当用户使用用户名/密码登录时，服务器将验证这些凭据，并向客户端发送回一个JSON web令牌，然后客户端必须将该令牌与每个API请求一起发送。所以React-redux应用程序必须存储这个令牌。如何在React-redux应用程序中安全地<e

浏览 0提问于2016-04-18得票数 11

1回答

React导航:在两个底部选项卡中使用相同的屏幕

我的应用程序有两个底部选项卡，我希望在每个选项卡中重用相同的屏幕组件，但是参数不同(在UserNav中，任务引用用户的任务，而在FriendsNav中，任务引用朋友的任务)。这两个屏幕将只调用共享组件。使用一个屏幕文件--但是在每个导航器中分配为不同的routeNames --然后在调用组件时，使用提供的信息来确定使用的是哪个路由/导航器。目前，我正在执行后者，使用navigation.state.routeName来确定当前的路由调用(并从那里相应地设

浏览 0提问于2019-02-01得票数 1

2回答

在Redux存储中存储函数的替代方法是什么

、、、

.>我希望NavigationBar中的ActionButton根据路由器(标准ReactRouter路由器)呈现的路由做一些不同的事情。首先想到的是我的第一个想法是在存储中保存一个函数，并使用mapStateToProps和connect将该函数作为道具发送到ActionButton。我非常确定这应该是可行的，但我知道在商店中存储非序列化的东西可能会有负面的后果。特别是，它给持久化和恢复存储内容带来

浏览 3提问于2018-12-22得票数 0

2回答

使用React访问导航器-本机和Redux

、

使用React -原生(0.19)和Redux，我可以在React组件中从一个场景导航到另一个场景，如下所示： title: "Registrations",}); 该

浏览 1提问于2016-02-01得票数 13

回答已采纳

2回答

保存什么&在Flux / Redux中不保存什么？

、、、、

所以我相信使用Redux有不同的方法，我不确定这到底是一个好主意，还是我现在所做的是完全错误的。比如说，我有一个管理学校(班级和学生等)的软件。我现在使用Redux的方式如下： 1 I首先存储应用程序状态:选择哪个瞳孔，哪个视图当前处于活动状态，选中哪些复选框。在我看来，这与存储应用程序状态的想法不同，因为与应用程序状态有关的许多事情并不是首选项，而只是当前选择的内容。这种划分有意义吗，或者你会建议不要这样做？在我的例子中，我会将一个json 完全加载到我的商店中，然后继续使用它。因此，

浏览 3提问于2017-05-12得票数 1

回答已采纳

2回答