我正在学习如何使用Redux和React,并在Redux购物车示例项目中找到了几段代码:
在actions/index.js模块中:
export const addToCart = productId => (dispatch, getState) => {
if (getState().products.byId[productId].inventory > 0) {
dispatch(addToCartUnsafe(productId))
}
}
在ProductContainer模块中:
import { addToCart } from '../actions'
export default connect(
mapStateToProps,
{ addToCart }
)(ProductsContainer)
我不明白{addToCart}构造意味着什么.它看起来有点像解构,但没有协助运营商.有人能指出我是什么,我们什么时候需要使用这样的语法？
我试图从组件调用reducer并想在component中进行渲染，但是当我试图将reduce存储在redux的createStore（）方法中时，上面的错误就要来了。我的代码是这样的：
import { applyMiddleware, compose, createStore } from 'redux'
import thunk from 'redux-thunk'
import { browserHistory } from 'react-router'
import makeRootReducer from './reducers'
import { updateLocation } from './location'
import allReducers from './reducers';
export default (initialState = {}) => {
// ======================================================
// Middleware Configuration
// ======================================================
const middleware = [thunk]
// ======================================================
// Store Enhancers
// ======================================================
const enhancers = []
let composeEnhancers = compose
if (__DEV__) {
const composeWithDevToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
if (typeof composeWithDevToolsExtension === 'function') {
composeEnhancers …我希望用户能够输入最多2000的数字,超过2000的任何内容都可以简单地反馈到输入中作为'2000'.
<input type="number" className="no-spin"
min="0" max="2000"
value={???}
{...eval(`${meal}_salt_amt_1`)} />
顺便说一下,'max'属性只能阻止用户使用向上箭头增加到2000以上.
而redux-form的"验证"功能并不限制可输入的内容.
以下是我将值(状态)限制为2000的方法......
export function updateStats(values) {
for (var value in values){
if (value.search('salt_amt') >= 0) {
if ( values[value] > 2000) values[value] = 2000;
}
}
return {
type: UPDATE_STATS,
stats: JSON.parse(JSON.stringify(values))
};
}
...到目前为止一切都那么好,因为在我的DevTools redux插件中,我可以看到这些值的状态在2000年达到顶峰.
但是如何强制该状态回到我的redux-form输入字段？
将状态映射到道具并使用道具不起作用.这样做让我输入超过2000的任何数字......
function mapStateToProps(state) {
return {
...
breakfast_salt_amt_1: state.stats.breakfast_salt_amt_1,
...
}
}
<input type="number" className="no-spin"
min="0" max="2000"
value={breakfast_salt_amt_1}
{...breakfast_salt_amt_1} />
只是使用国家也不起作用......
<input type="number" className="no-spin"
min="0" max="2000"
value={state.stats.breakfast_salt_amt_1}
{...breakfast_salt_amt_1} />
// => Uncaught TypeError: …在我的react-redux表单中,我想重新打包一个必填字段,并禁用我的导航栏组件,直到重新验证回复,我发现一些类似的问题与javaScript但我无法用React应用它们,因为我是使用react-recaptcha插件:
<div className="form_wrapper">
<ReCAPTCHA
sitekey="xxxxxxxxxxx"
render="explicit"
onloadCallback={this.callback}
verifyCallback={this.verifyCallback}
/>
</div>
<NavigationBar
fields={requiredFields}
// disableNext={this.props} (here where i make conditions to disable)
/>
这是我的回调和verifyCallback方法:
verifyCallback(response) {
return response;
}
callback() {
console.log('Done !!');
}
谢谢
我添加了Hardik Modha建议的代码,如下所示,但仍有相同的问题:
<NavigationBar
fields={requiredFields}
disableNext={this.props ... && !this.validateForm()}
/>
verifyCallback(response) {
this.setState({
reCaptchaResponse: response,
});
}
validateForm() {
if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
return false;
}
return true;
}
我直接从Redux文档中得到了这个:
const logger = store => next => action => {
console.group(action.type)
console.info('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
console.groupEnd(action.type)
return result
}
现在,我知道如何使用承诺,但是thunks ......我有点失落.
为什么他们要做到以下几点:store => next => action =>？
我有以下CustomInput组件:
import React from 'react';
const CustomInput = props => (
<div className="form-group">
<label className="form-label">{props.title}</label>
<input
className="form-input"
name={props.name}
type={props.inputType}
value={props.content}
onChange={props.controlFunc}
placeholder={props.placeholder}
/>
</div>
);
CustomInput.propTypes = {
inputType: React.PropTypes.oneOf(['text', 'number']).isRequired,
title: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
controlFunc: React.PropTypes.func.isRequired,
content: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]).isRequired,
placeholder: React.PropTypes.string,
};
export default CustomInput;
这是我的形式:
import React, { PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
import CustomInput from '../components/CustomInput';
const renderMyStrangeInput = field => (
<CustomInput
inputType={'number'}
title={'How many items do you …在redux中，当调度一个动作时，reducer将相应地更改状态，调用该动作的组件也可以访问该状态（由Provider通过props传递）。我对吗？
状态是访问组件中操作结果的唯一方法吗？（调用动作的组件）。
如何将回调函数传递给操作，然后使用该方法将结果发送回组件？
我正在研究Reactjs，并有如下代码块：
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
}
this.setStateHandler = this.setStateHandler.bind(this);
};
setStateHandler() {
var item = "setState..."
var myArray = this.state.data;
myArray.push(item)
this.setState({data: myArray})
};
render() {
return (
<div>
<button onClick = {this.setStateHandler}>SET STATE</button>
<h4>State Array: {this.state.data}</h4>
</div>
);
}
}
export default App;
单击按钮后，将显示“ setState ...”字符串。但是我不明白this.setStateHandler.bind(this);函数的用法。谁能为我解释一下？
我需要帮助以在窗口按键事件后调度操作
() => Observable.fromEvent(window, 'keyup').map(event => ({type: 'KEY_PRESSED', key: event.key, event}));
感谢你
在我的启动中,我将一些变量加载到我在Redux的全局存储中,包括填充一个名为"outputList"的数组
在我的一个组件中,当我运行它时,即使我在渲染之前尝试错误检查数据,它在加载时仍然会闪烁红色说明:
未捕获的TypeError:无法读取未定义的属性"长度"
一旦它在1或2秒后收到数据,它就会正确加载.显然这是不可接受的.它从中接收数据的API也是同步的.
在我的组件中,我有以下内容.它显示"它有效!" 只有在浏览器闪烁后才会出错,大喊大叫该属性长度未定义的消息.
我怎样才能解决这个问题？感谢您的任何帮助
renderContent() {
if (this.props.outputList.length > 0) {
return (<span>it worked!</span>);
}
else {
return (<span>did not work</span>);
}
}
render() {
return (
{this.renderContent()}
);
}
编辑:
在renderContent()中,我根据请求添加了console.log(this.props.outputList).我得到2个日志
第一个日志:一个空数组第二个日志:一个填充数组
对不起我不认为你真的需要我发布实际的数组数据吗？
redux ×10
reactjs ×7
javascript ×4
react-redux ×4
redux-form ×2
ecmascript-6 ×1
react-native ×1
recaptcha ×1
redux-thunk ×1