Tag: react redux

可以编写道具来覆盖react-redux中的connect（）吗？: 我负责重构使用ReactJS / Redux过度使用不需要的dependency injection。依赖关系在JSX标记中使用道具注入，如下所示： <CardContainer addCountry={actions.addCountry} addDateRange={actions.addDateRangeFilter} addDistributor={actions.addDistributor} addListFilterItem={actions.addListFilterItem} addListFilterWithOneItem={actions.addListFilterWithOneItem} {/* …other props removed for brevity */} /> 这些道具在整个代码库（以及像这样的多个组件）的几个地方重复使用。我正在经历并取消将这些函数作为道具传递给CardContainer类，并使用connect（）（来自react-redux npm包）的地方，如下所示： export default connect(undefined, dispatch => ({ actions: bindActionCreators(MyActions, dispatch), }))(class DistributorFilterPaneCards extends Component { static propTypes = { addCountry: PropTypes.func, addDateRange: PropTypes.func, addDistributor: PropTypes.func, addListFilterItem: PropTypes.func, addListFilterWithOneItem: PropTypes.func, 我发现，虽然很less有一个道具，例如， addCountry ，它通过了一个不同于所有其他的function。基本上，我想连接（）像静态defaultProps对象工作。 […]

我怎样才能从数据库中得到正确的数据呢？: 我使用nodejs + react + redux做了一个页面。我在页面中做了一个编辑button，并想编辑我的数据。现在我selectKUMAMOTO-CTI并将优先级从5更改为10.我使用ajax从数据库获取数据以填充空白。在提交之前，我可以从数据库中获得正确的数据。但是，当我改变优先级并单击编辑它填充的数据将是错误的，我必须刷新它，以获得正确的数据。有时它会变成这样：错误有谁能告诉我如何解决？这是pic： progress 这是我的代码。 server.js const Koa = require('koa') const Router = require('koa-router') const cors = require('koa2-cors') const app = new Koa() const router = new Router() import { createStore } from 'redux' import { Provider } from 'react-redux' import serversReducer from '../client/reducers/reducer' import { renderToString […]

如何为http状态码发送自定义错误信息与node.js: 我正在使用node.js进行用户authentication的基于rest的api。我想发送一个自定义的错误消息更具描述性，如“不正确的用户名/密码组合”。在演示文稿方面，我使用fetch和redux-saga来反应原生。这里是用于将用户名/密码发送到其余层并接收返回的http错误消息的redux-saga代码： export const login = ({userName, password}) => { return fetch(globals.BASE_URL + `/api/login`, { method : 'POST', headers : { 'Accept' : 'application/json', 'Content-Type' : 'application/json' }, body: JSON.stringify({ userName: userName, password: password }) }); } const fetchLoginStatus = function* (action) { const response = yield call(login, action); try { if (response.status […]

反应reduxasynchronousmapStateToProps: 当在componentDidMount ， mapStateToProps调用mapDispatchToProps函数的时候， mapStateToProps totalDoctorCount: state.doctors.totalDoctorCount不会总是按时加载，我会在console.log("this.props.totalDoctorCount: "+this.props.totalDoctorCount );得到undefined结果console.log("this.props.totalDoctorCount: "+this.props.totalDoctorCount ); 。我知道这是async的本质，但有没有办法解决这个问题，我在这里做错了什么。完整代码： doctorActions export function getDoctors(filterType){ return function(dispatch){ axios.get("/api/doctors/"+filterType) .then(function(response){ dispatch({type:"GET_DOCTORS",payload:response.data}); }) .catch(function(err){ dispatch({type:"GET_DOCTORS_REJECTED",payload:err}); }) } } export function getTotalDoctors(){ return function(dispatch){ axios.get("/api/getTotalDoctors/") .then(function(response){ dispatch({type:"TOTAL_DOCTORS",payload:response.data}); console.log(response.data); }) .catch(function(err){ //console.log(err); dispatch({type:"TOTAL_DOCTORS_REJECTED",payload:"there was an error rortal doctors"}); }) } } doctorReducer export function doctorsReducers(state={ doctors:[], }, […]

如何在我的React应用程序中使用猪拉丁语翻译器npm模块: 我需要编写一个React / Redux应用程序来将英文句子翻译成Pig Latin。我发现有一些已经存在的npm 模块用于这个目的，因此想到重用它们。我为这个翻译写了一个简单的function组件，如下所示。 import _ from 'lodash'; import React from 'react'; import piglatin from 'piglatin'; function convertToPigLatin(data){ // https://www.npmjs.com/package/piglatin // return pigLatin(data); } export default (props) => { console.log(props.data); console.log(piglatin('hello there')); // Works fine console.log(piglatin(props.data)); // gives an ERROR return ( <label>Hello !</label> ) } 简单地说，我只是想将翻译后的文本logging到控制台中，但是当我尝试这个function后，在根据下面的答案更改硬编码文本后可以正常工作。 console.log(piglatin('hello there')); // Works fine […]

Redux – 通过键在状态数组中查找对象并更新其另一个键: 我正在使用后端的NodeJS和前端的React + Redux的CRUD应用程序。这是一个如何运作的快速模式：添加一个项目用户inputpost的标题然后将标题发送到在NodeJS中获取POST路由并通过主体发送标题的调度在NodeJS路由中，我添加了一个新的项目集合与该标题 BACKEND DONE，新的post在服务器中我在步骤2中添加.then()调度function，其中我派遣一个type: 'ADD_POST'并post: post （我从res.json({post: result from database}) ）在我的reducer中，我设置了一个CASE 'ADD_POST': return action.post 完成FRONTEND后，用户现在可以看到同一个post，而不需要刷新我想使用相同的逻辑来更新特定post的喜好。这是我迄今为止所做的：点击一个post上的button会触发一个获取NodeJS PUT路由的调度 NodeJS路由查找使用ID的文章，并添加1到喜欢该post的旧值 BACKEND DONE，现在在服务器上有1个以上我再次添加到获取NodeJS路由的调度中，在该调度中，我分配了一个type 'ADD_LIKE'的操作，并更新了更新的post ID 在reducer中，我设置了一个CASE 'ADD_LIKE':它使用下面代码片段中的代码遍历整个状态。这是这个片段： state.map(item => { if(item.id === action.postid) { //i find the specific item, but now im stuck on how […]

在React Redux中从package.json获取版本号: 编辑：如果有其他人遇到这个，应用程序创build使用create-react-app ，它限制导入到src文件夹内，但是如果你升级react-scripts到v1.0.11它可以让你访问package.json。我试图从我的应用程序中获取package.json的版本号。我已经尝试了这些build议，但没有人工作，因为我不能从src文件夹外部访问package.json（可能是由于React，我是新来的）。将package.json移动到src中意味着我不能运行npm install ， npm version minor和npm run build从我的根文件夹npm run build 。我已经尝试使用process.env.npm_package_version但导致未定义。我正在使用Jenkins，我还没有设置它来推动提交，但我唯一的想法是从GitLab中的标签获取版本，但我不知道如何做到这一点，会增加不必要的依赖回购，所以我真的想find一个替代品。编辑：我的文件结构是这样的： –> RootAppFolder |–> build |–> node_modules |–> public |–> src |–> Components |–> Root.js | |–> package.json 所以要从Root.js访问package.json，我必须import packageJson from './../../package.json' ，然后出现以下错误： ./src/components/Root.js 找不到模块：您试图导入不在src /目录下的./../../package.json文件。 src /之外的相对导入不受支持。您可以在src /中移动它，或者从项目的node_modules /中为它添加一个符号链接。

有没有可能使用反应/ Redux /佐贺应用程序没有后端: 以前我用React / Redux / Saga作为Ruby / Rails和Nodejs后端应用程序的“performance层”。目前有几个后端服务（我不控制），我应该使用我的React / Redux / Saga应用程序进行身份validation和获取数据。在我的本地机器上，我可以在webpack-dev-server的帮助下运行我的React / Redux应用程序，因此它可以接收来自浏览器的请求。但生产环境呢？是否有可能不使用Nginx，Nodejs，Rails部署React / Redux / Saga应用程序？

在NodeJS服务器（我正在使用react-router）的同构react-redux应用程序中设置存储的初始状态，: 我正在尝试从NodeJS服务器设置我的redux商店的初始状态。我不确定我错过了什么，以及如何使其工作。这是我的server.js const express = require('express'); const path = require('path'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const webpackHotServerMiddleware = require('webpack-hot-server-middleware'); const config = require('./webpack/webpack.development.config.js'); const compiler = webpack(config); const app = express(); app.use(webpackHotMiddleware(compiler.compilers.find( compiler => compiler.name === 'client' ))); app.use(webpackHotServerMiddleware(compiler)); app.listen(3000); 这是我的webpack.development.config const path = require('path'); module.exports = […]

发布到数据库时，我得到一个“发送错误后无法设置标头”: 在这个问题中，我发布了完整的数据stream来完成销售，因为我不知道错误在哪里。在我的应用程序中，在Checkout组件中调用一个名为handlePay（）的函数，该函数又调用一个名为makeSale（）的动作创build器。 makeSale（）然后向router.js中的服务器发出一个POST请求，该请求将使用mongoose处理数据库中的这个销售。从控制台读取错误 “/Users/marcushurney/Desktop/POS/node_modules/mongodb/lib/utils.js:98 process.nextTick（function（）{throw err;}）; ^ 错误：发送后无法设置标题。“ 我不确定这个错误是否存在于与router.js或前端其他地方的数据库进行通信的代码中。前端的组件叫做Checkout.jsx，处理销售的function是handlePay（），其关联的动作创build者是makeSale（）。 Checkout.jsx handlePay: function() { var props = { user_id: this.props.activeUser._id, //This sale will belong to the user that is logged in (global state) items: [], //All the items in the cart will be added to the sale below (global state) total: this.props.cartTotal //Total price […]