Есть ли способ сделать этот компонент реакции менее многословным?

Question

Итак, я написал тестовый проект , чтобы исследовать реагировать, реагировать, маршрутизировать и реагировать на избыточность.

После того, как все заработало нормально, я снова посмотрел на Settings.jsx имне интересно, как я могу сделать его менее многословным и подверженным ошибкам:

import React, { Component } from "react";

import { connect } from "react-redux";

class Settings extends Component {
  state = { name: this.props.settings.name };

  render() {
    return (
      <div>
        <h1>Settings</h1>
        <p>This is Settings page</p>
        My name is{" "}
        <input
          value={this.state.name}
          onChange={e => this.setState({ name: e.target.value })}/>
        <button onClick={e => this.props.changeName(this.state.name)}>
          Change
        </button>
      </div>
    );
  }
}

const mapState = state => ({ settings: state.settings });
const mapDispatch = dispatch => {
  return {
    changeName(name) {
      dispatch({ type: "setName", name });
    }
  };
};

export default connect(
  mapState,
  mapDispatch
)(Settings);

Моя первая идея состояла в том, чтобы преобразовать его в функциональный компонент , но говорят, что они не имеютсостояние и мне нужно состояние для локальной обработки ввода.

Answer 1

вы можете сделать это, если хотите добавить набираемый текст в хранилище:

Settings.js

import React from "react";
import { changeName, typingName } from '../actions/settingsActions'
import { connect } from "react-redux";

const Settings = () => {
  const { changeName, typingName, typedName, submittedName } = this.props
  return (
    <div>
      <h1>Settings</h1>
      <p>This is Settings page</p>
      My name is{" "}
      <input
        value={typedName}
        onChange={e => typingName(e.target.value)}/>
      <button onClick={changeName(submittedName)}>
        Change
      </button>
    </div>
  );
}

const mapState = state => ({ 
  typedName: state.typedName,
  submittedName: state.submittedName
});
const mapDispatchToProps = dispatch => ({
  typingName: x => dispatch(typingName(x)),
  changeName: x => dispatch(changeName(x))
})

export default connect(
  mapState,
  mapDispatch
)(Settings);

settingsActions.js

export const typingName = payload => ({
    type: 'TYPING_NAME',
    payload 
});

export const changeName = payload => ({
    type: 'CHANGE_NAME',
    payload 
});

settingsReducer.js

export const typingName = (state = [], action) => {
  switch (action.type) {
        case 'TYPING_NAME':
                return [...state, action.payload];

        default:
                return state;
  }
};

export const changeName = (state = '', action) => {
  switch (action.type) {
        case 'CHANGING_NAME':
                return action.payload;

        default:
                return state;
  }
};

Возможно, вы могли бы достичь чего-то подобного.Но, как мне кажется, лучше проверять состояние ввода внутри компонента, а затем отправлять конечный результат в магазин, чтобы избежать многословия.Также вы, конечно, должны создать файл констант, но я думаю, вы уже знаете.

Answer 2

С @babel/plugin-proposal-decorators, connect можно использовать в качестве декоратора:

import React, { Component } from "react";

import { connect } from "react-redux";

const mapState = state => ({ settings: state.settings });
const mapDispatch = dispatch => {
  return {
    changeName(name) {
      dispatch({ type: "setName", name });
    }
  };
};

@connect(mapState, mapDispatch)
export default class Settings extends Component {
  state = { name: this.props.settings.name };

  render() {
    return (
      <div>
        <h1>Settings</h1>
        <p>This is Settings page</p>
        My name is{" "}
        <input
          value={this.state.name}
          onChange={e => this.setState({ name: e.target.value })}/>
        <button onClick={e => this.props.changeName(this.state.name)}>
          Change
        </button>
      </div>
    );
  }
}

небольшое, но имхо хорошее упрощение

также, вы можете использовать краткий синтаксис с вашим mapDispatch:

const mapDispatch = dispatch => ({
  changeName(name) {
    dispatch({ type: "setName", name });
  }
});