[英]Sharing actions and reducers with react/redux
I'm still very much a react/redux noob.我仍然是一个反应/redux 菜鸟。 On one page I have a ton of text inputs.
在一页上,我有大量的文本输入。 After a while I started noticing my action file has functions doing the same thing but for different inputs:
一段时间后,我开始注意到我的操作文件具有执行相同操作但用于不同输入的函数:
export function setInputName(string) {
return {
type: 'SET_CURRENT_NAME',
payload: {value: string}
};
}
export function setInputCity(string) {
return {
type: 'SET_CURRENT_CITY',
payload: {value: string}
};
}
With my reducer looking like:我的减速机看起来像:
export function currentName(state='', {type, payload}) {
switch (type) {
case 'SET_CURRENT_NAME':
return payload.value;
default:
return state;
}
}
export function currentCity(state='', {type, payload}) {
switch (type) {
case 'SET_CURRENT_CITY':
return payload.value;
default:
return state;
}
}
And my component had these multiple inputs:我的组件有这些多个输入:
import {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {setInputName, setInputCity} from 'actions/form';
export default class Form extends Component {
static propTypes = {
setInputName: PropTypes.func.isRequired,
setInputCity: PropTypes.func.isRequired,
currentName: PropTypes.string.isRequired,
currentCity: PropTypes.string.isRequired
}
render() {
let {setInputName, setInputCity, currentName, currentCity} = this.props;
return (
<div>
<input
type="text"
placeholder="Name"
onChange={(e) => setInputName(e.currentTarget.value)}
value={currentName}
/>
<input
type="text"
placeholder="City"
onChange={(e) => setInputCity(e.currentTarget.value)}
value={currentCity}
/>
</div>
);
}
}
function select(state) {
return {
currentName: state.form.currentName,
currentCity: state.form.currentCity
};
}
function actions(dispatch) {
return bindActionCreators({
setInputName: setInputName,
setInputCity: setInputCity,
}, dispatch);
}
export default connect(select, actions)(Form);
Which isn't very DRY and I immediately thought I was doing something wrong.这不是很干燥,我立即认为我做错了什么。 Is there a good way to have a common
setInputValue
action for all text inputs on every page and component of my app?有没有一种好方法可以为我的应用程序的每个页面和组件上的所有文本输入设置一个通用的
setInputValue
操作? I would also want to use a common reducer for every input.我还想为每个输入使用一个通用的减速器。 Thank you.
谢谢你。
UPDATE更新
Here's my gross example that works but I feel like this is still a bit convoluted and there has to be a better way.这是我的粗略示例,但我觉得这仍然有点令人费解,必须有更好的方法。 Basically in the reducer I check to see if that input has been used and added to the state yet.
基本上在减速器中,我检查该输入是否已被使用并添加到状态中。 If not I add it.
如果没有我添加它。 If so I just update its value.
如果是这样,我只是更新它的值。 EDIT I lied this doesn't actually work.
编辑我撒谎这实际上不起作用。
// actions
export function updateTextInput(name, value) {
return {
type: 'SET_CURRENT_TEXT_INPUT',
payload: {name: name, value: value}
};
}
// reducer
export function currentTextInput(state=[], {type, payload}) {
switch (type) {
case 'SET_CURRENT_TEXT_INPUT':
let newState = state;
let curInput = state.findIndex(function(elem) {
return elem.name === payload.name;
});
if (curInput === -1) {
newState.push({name: payload.name, value: payload.value});
} else {
newState[curInput].value = payload.value;
}
return newState;
default:
return state;
}
}
// component
...
render() {
let {updateTextInput, currentTextInput} = this.props;
return (
<div>
<input
type="text"
placeholder="Name"
onChange={(e) => updateTextInput('name', e.currentTarget.value)}
value={currentTextInput.name}
/>
<input
type="text"
placeholder="City"
onChange={(e) => updateTextInput('city', e.currentTarget.value)}
value={currentTextInput.city}
/>
</div>
);
}
...
A small first step to simplify the code is to use higher order reducers/functions.简化代码的第一步是使用高阶化简器/函数。
function makePropReducer(actionType, prop) {
return (state = '', {type, payload}) => {
if (type === actionType) {
return payload[prop];
}
return state;
};
}
export const currentName = makePropReducer('SET_CURRENT_NAME', 'value');
export const currentCity = makePropReducer('SET_CURRENT_CITY', 'value');
Ok here's an example as requested.好的,这是一个应要求的示例。 Let's say I have a User data model, it looks something like this:
假设我有一个 User 数据模型,它看起来像这样:
{
id: 1,
name: 'Some Name',
email: 'someemail@some.com',
age: 21
}
The way you currently have it set up you'd have to have SET_USER_NAME, SET_USER_EMAIL, SET_USER_AGE actions.您当前设置的方式必须有 SET_USER_NAME、SET_USER_EMAIL、SET_USER_AGE 操作。 No need for all those when you can have an UPDATE_USER action that receives an object of the updated values as an argument.
当您可以使用 UPDATE_USER 操作接收更新值的对象作为参数时,不需要所有这些。
To set a new name for the first user you would call the UPDATE_USER action like:要为第一个用户设置新名称,您可以调用 UPDATE_USER 操作,例如:
updateUser(1, { name: 'New Name' })
In the Users reducer you'd update the users' state (an array of users) like:在用户减速器中,您将更新用户的状态(用户数组),例如:
function updateUser(usersState, id, attrs) {
return usersState.map(user =>
user.id === id ?
Object.assign({}, user, attrs) :
user
);
}
I recently came up with such action,我最近想出了这样的动作,
export function controlStateChange(controlName, propertyName, value) {
return { type: 'CONTROL_STATE_CHANGE', payload: { controlName, propertyName, value } };
}
And correspoding reducer,和相应的减速机,
const actionHandlers = {
'CONTROL_STATE_CHANGE': (state, payload) => {
const controls = {
[payload.controlName]: {
[payload.propertyName]: payload.value
}
};
return {...state, controls };
}
};
It is quite general and I hope could serve you needs too.它很一般,我希望也能满足您的需求。
For saving input to state, you can use redux-form为了将输入保存到状态,您可以使用redux-form
It seems your question is not really related to sharing reducers/actions.看来您的问题与共享减速器/操作并没有真正相关。 For sharing actions/reducers, I wrote one and you can have a look redux-conditional
对于共享操作/reducers,我写了一个,你可以看看redux-conditional
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.