Question

因此，我写了test project来探讨react，react-router和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);

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

Answer 1

对于@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 });
  }
});

Answer 2

如果要在商店中添加输入文字，可以执行以下操作：

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

您也许可以实现这样的目标。但是我认为最好是验证组件内部的键入状态，然后像您一样将最终结果发送到商店，以避免太冗长。当然，您也应该创建一个常量文件，但是我想您已经知道了。

有什么办法可以使此反应组件更简洁？

2 个答案: