Javascript 有没有办法让react组件不那么冗长？

所以，我写了一篇文章来探索react、react路由器和react redux

在一切正常工作后，我再次关注

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);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
类设置扩展组件{
状态={name:this.props.settings.name}；
render（）{
返回(
设置
这是设置页面

我的名字是{”“}
this.setState（{name:e.target.value}）}/>
this.props.changeName（this.state.name）}>
改变
);
}
}
const-mapState=state=>（{settings:state.settings}）；
const mapDispatch=dispatch=>{
返回{
更改名称（名称）{
分派（{type:“setName”，name}）；
}
};
};
导出默认连接(
mapState，
地图发送
)（设置）；

---

我的第一个想法是将其转换为，但据说它们没有状态，我需要该状态来本地处理输入。

使用

@babel/plugin提案装饰器

，

连接

可以用作装饰器：

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>
    );
  }
}

---

使用

@babel/plugin提案装饰器

，

连接

可以用作装饰器：

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>
    );
  }
}

---

如果要在存储区中添加键入文本，可以执行此操作：

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);

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

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

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;
  }
};

设置还原程序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);

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

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

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;
  }
};

你可能会达到这样的目标。但是我认为，验证组件内部的输入状态，然后像您那样将最终结果发送到存储是一个更好的主意，以避免如此冗长。

---

当然，您也应该创建一个常量文件，但我想您已经知道了。

如果您想在存储中添加键入文本，可以这样做：

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);

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

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

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;
  }
};

设置还原程序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);

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

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

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;
  }
};

你可能会达到这样的目标。但是我认为，验证组件内部的输入状态，然后像您那样将最终结果发送到存储是一个更好的主意，以避免如此冗长。

---

当然，您也应该创建一个常量文件，但我想您已经知道了。

您好，您这样做没问题。如果您希望将输入名称状态添加到存储中并转换为功能组件，您可以这样做，但我认为这是不必要的。但是，我建议您将所有操作添加到单独的文件中，以提高可读性。redux的主要目标是提供所有现有操作的清晰可视性。仅供参考-功能组件可以通过使用钩子来拥有状态，钩子现在在alpha中出现，并在v16.7中引入-ref:Hi，这与您的方式相同。如果您希望将输入名称状态添加到存储中并转换为功能组件，您可以这样做，但我认为这是不必要的。但是，我建议您将所有操作添加到单独的文件中，以提高可读性。redux的主要目标是提供所有现有操作的清晰可见性。仅供参考-功能组件可以通过使用钩子获得状态，钩子现在在alpha中出现，并在v16.7中引入-参考：