Tag: redux

在Redux中使用React Native中的NetInfo中间件: 我想testing所有组件是否用户连接到互联网。我可以在每个组件中使用NetInfo ，但是由于我使用的是redux ，所以我认为使用中间件（？）可以更容易。我用过 import { createStore, applyMiddleware } from 'redux'; const netInfo = store => next => action => { const listener = (isConnected) => { store.dispatch({ type: types.NET_INFO_CHANGED, isConnected, }); }; NetInfo.isConnected.addEventListener('change', listener); NetInfo.isConnected.fetch().then(listener); return next(action); }; const store = createStore(AppReducer, applyMiddleware(netInfo)); 其中AppReducer只是combineReducers(navReducer, netInfoReducer, …) 。这似乎工作，但我真的很担心，如果这performance不错。它似乎只运行一次，但我从来没有删除监听或任何东西。如果你想用isConnectedvariables填充所有的组件，你通常会这么做吗？

反应路由器打印在客户端反应空: 我使用服务器端渲染的性能，但我的客户端不同的服务器端，因为我的客户端渲染首先<!– react-empty: 1 –>而不是组件，然后在客户端检测到校验和不同，它重新呈现应用程序，所以我失去了性能。在这里，我问问题在哪里描述我的问题，并经过一些debugging后，我发现我的Router元素在我的根组件导致问题 render() { let history = browserHistory; if (this.props.store) { history = syncHistoryWithStore(browserHistory, props.store) } return ( <Provider store={store}> <Router history={history} routes={routes} /> </Provider> ); } 当我改变Router为简单的div元素它呈现div，但与路由器它不首先渲染我的元素，这将导致校验和不匹配和客户端重新呈现。这是我的路线。自从我使用延迟加载后，我已经写了这种方法。 export default { component: App, path: '/', indexRoute: { onEnter: (nextState, replace) => { replace('/sneakpeak') } }, childRoutes: [ { path: '/', […]

react-router-redux：将路由参数映射到状态: 有没有办法自动映射路由参数到状态键？例如：我想将state.auth.resetEmail和state.auth.resetToken初始化为路由参数params.resetEmail params.resetToken只要这些路由参数可用。也许我以错误的方式接近这个？

托pipeReact / Redux / Node.js Web应用程序: 我已经用React / Redux / Nodejs编写了一个简单的Web应用程序，它可以在我的系统上运行。如果我想把整个事情放到networking服务器上，我现在需要注意什么？是否有任何要求，或者我可以从标准的托pipe服务之一抓取一个标准的包，我很好走？

“不能读取未定义的属性'数据'错误unit testing与axios和moxios redux行动: 我正在尝试使用axios进行api调用的asynchronous还原操作。我在moxios的帮助下testing它，并且它在几天前工作，但由于某种原因，今天当我创build另一个asynchronous操作时，它刚刚打破。这是我的unit testing代码： 1 import configureMockStore from 'redux-mock-store'; 2 import thunk from 'redux-thunk'; 3 import moxios from 'moxios'; 4 5 import * as types from '../../../../client/auth/actions/action_types'; 6 import loginAuth from '../../../../client/auth/actions/login_action'; 7 8 require('dotenv').config(); 9 const expect = require('chai').expect; 10 11 const mockStore = configureMockStore([thunk]); 12 13 const user = { 14 email: 'john@loginActionTest.com', […]

如何在没有npm（Node.js）的情况下设置React和Redux项目？: 我已经看到很多video和post用npm（Node.js）configuration项目。我已经有.Net服务器，我想使用React.JS和Redux。我可以通过添加下面的JS文件来设置它为React。 <script src="~/Scripts/src/react.min.js"></script> <script src="~/Scripts/src/react-dom.min.js"></script> <script src="~/Scripts/src/browser.min.js"></script> 但是，如何在我的应用程序中包含Redux以使用React和Redux？

MERN React / Redux / MongoDB实体authentication的同构样板: 我有一个任务，使用ReactJS / Redux / MongoDB / Node （ MERN ）作为基础技术堆栈，为我们未来的Web应用程序构build一个样板。基本上我们所有的Web应用程序都是仪表板，有一个loginlogin页面（注册/login/忘记密码/重置密码）。样板应该由微服务驱动，并且需要支持Web和移动集成（使用ReactJS Native ）。客户端和服务器都会调用我的API，这些API也需要作为REST服务来集成。应用程序应该是同构的，作为今天的最佳做法。我决定从react-redux-universal-hot-example开始，但是我们可以看到它的着陆页，可能已经过时了（写于2015年6月）。我的项目的基本结构如下模块： api：API服务（REST）authentication：处理authentication服务器：服务器客户端：客户端模型：Mongo模型和数据库访问静态：静态文件（图片等）这些是我打算使用的模块（主要来自react-redux-universal-hot-example）：反应（基本）反应路由器（路由）快递（基本）巴别塔（基本） Webpack（基本） Webpack开发中间件（用于开发） Webpack Hot Middleware（用于开发） Redux（用于数据更新） Redux开发工具（用于开发） React Router Redux Redux / React Router绑定。 ESLint（用于代码样式）还原forms（帮助forms） lru-memoize（形成validation） multireducer（build立一个基于键的reducer） style-loader（使用css和sass） bootstrap-sass-loader（轻松定制引导程序颜色） font-awesome-webpack（轻松定制fa颜色）反应头盔（pipe理元标签） webpack-isomorphic-tools（for isomorphic app）摩卡（unit testing）不存在于反应 – 通用热点的例子中，我会加上Ç […]

在heroku反应的应用程序不启动: 我有一个应用程序与本地主机工作正常，但它并没有开始在我的heruko实例。这是我的package.json文件： { "name": "innova-client", "scripts": { "build": "webpack –config build/webpack.development.js", "watch-build": "webpack –progress –watch –config build/webpack.development.js", "start": "webpack-dev-server –config build/webpack.standalone.js", "test": "jest" }, "jest": { "transform": { ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js" }, "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$", "moduleFileExtensions": [ "ts", "tsx", "js" ] }, "devDependencies": { "@types/enzyme": "^2.7.5", "@types/jest": "^18.1.1", "@types/jquery": "^2.0.40", "@types/lodash": "^4.14.54", "@types/react": "^15.0.14", "@types/react-addons-test-utils": "^0.14.17", "@types/react-dom": […]

在React App中不显示的图像: 下午好，我正在使用React / Redux应用程序，正在加载到我的商店的图像不显示。我的galleryObject.js包含了我想要显示的每个图像的信息，例如： pastry1: { name: "Pastry!", image: "./client/images/cake1.jpg", desc: "Tasty Pastry" }, pastry2: { name: "Pastry!", image: "./client/images/cake2.jpg", desc: "Tasty Pastry" } … (all the way to pastry17) 让我感到困惑的是绝对path不会导致图像被显示，状态被正确加载，因为我可以在我的React开发工具中看到它。我甚至把一个超链接扔到一个在线图像，它的工作来testing它。我的文件结构是这样的： // Project // client //images (where the actual pictures are stored) //data (where galleryObject.js resides) //main.js (where everything eventually becomes bundled […]

Redux-Thunk“操作必须是普通对象。使用自定义中间件进行asynchronous操作。“: 使用Thunk中间件创build我的商店 import { createStore, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; const store = createStore( reducer, initialState, applyMiddleware(thunk) ); 并创造我的行动，呼吁一个承诺 export function getArticle(url) { return function (dispatch) { fetchArticle(url).then( article => dispatch(setArticle(article)), ); }; } function fetchArticle(url) { return new Promise((resolve, reject) => { request .get(url) .end( (err, res) => { if (err […]