Как сделать onChange функцию через redux?

Question

[Ninja Mate]

Нужно сделать action (Универсальная функция для input onChange ) в редаксе, которая принимает два значения

onChange={e=>this.props.loginActions.onChangeUser(e.target.value, e.target.name)}

вот мой компонент
Login

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import TextFieldGroup from '../common/TextFieldGroup';

import * as authActions from '../../actions/authActions'

class LoginForm extends Component {
...
  render() {
    return (
      <form onSubmit={()=>this.onSubmit}>
        <h1>Login</h1>

        <TextFieldGroup
          field="username"
          label="Username"
          value={this.props.username}
          onChange={e=>this.props.loginActions.onChangeUser(e.target.value, e.target.name)}
        />
\
        <div className="form-group"><button className="btn btn-primary btn-lg" disabled={this.props.login.isLoading}>Login</button></div>
      </form>
    );
  }
}

LoginForm.propTypes = {
  login: PropTypes.object.isRequired
}

export const mapStateToProps = state => {
    return {
        login: state.login
    }
}

const mapDispatchToProps = dispatch => ({
    loginActions: bindActionCreators(authActions, dispatch)
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(LoginForm)

Actions

import * as login from '../types/login';
//как сделать правильно? 
export function onChangeUser(value, name) {
  return {
    type:     login.ON_CHANGE_USER,
    [name]: value
  };
}

Reducer

import  * as loginActions  from '../types/login'

const initialState = {
...
    username: '',
}

export default function reducer(state=initialState, action) {
    switch (action.type) {

        case loginActions.ON_CHANGE_USER:
            return {
                //что здесь и как возвращать?
            }

    default:
        return state
  }
}

В types просто декларирую const export const ON_CHANGE_USER = 'ON_CHANGE_USER';
Как такое сделать?

Comments

[Максим]

Ninja Mate - опишите подробнее, что вы хотите сделать? Если просто поменять имя юзера (либо сменить юзера и, например, в шапке отобразить корректный username) - то вам не нужно 2 значения передавать и в action'e использовать [name] ..

[Ninja Mate]

Максим: хочу универсальный onChange сделать для полей текстовых.

Answer 1

[Максим]

export function onChangeUser(value, name) {
  return {
    type:     login.ON_CHANGE_USER,
    fieldName: name,
    value: value
  };
}
...
case loginActions.ON_CHANGE_USER:
  return {
    ...state,
    [action.fieldName]: action.value
}

Comments

[Ninja Mate]

Спасибо, заработало вот так. или не стоит весь объект login передавать

return {...state, ...action.login}

?
(user переименовал в login)

export function onChangeLogin(value, name) {
  return {
    type:     login.ON_CHANGE_LOGIN,
    login: {[name]:   value}
  };
}
...
case loginActions.ON_CHANGE_LOGIN:
  return {...state, ...action.login}

[Максим]

Ninja Mate: так делать можно.