Articles of 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 […]