如何将以下代码转换为管理代码

Question

我是 redux 的新手，不知道我哪里出错了。我需要将整个代码更改为道具吗？如果我必须将相应的代码更改为 props，那么如何获取我已获取状态 {} 的那些输入？你能帮我吗？

我已经通过这个链接"在独立组件反应和 redux 之间传递数据"，但它只有一个输入，这里我有多个组件。

第一个组件：

import React, { Component } from 'react'
import { Button, Icon, Modal, Form} from 'semantic-ui-react';
import {connect} from 'react-redux';
import './Email.css'
//import Editor from './Edit'
import * as storeActions from "../redux/storeActions";
class Compose extends Component {
constructor(props){
super(props);
this.state = {
to: "",
cc: "",
bcc: "",
subject: ""
}
this.changeHandler = this.changeHandler.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = (e) => {
e.preventDefault();
//Get the values from state
const To = this.state.to;
const Cc =  this.state.cc;
const Bcc =  this.state.bcc;
const Subject = this.state.subject;
const sentItem = {
To,
Cc,
Bcc,
Subject
}
// this.props.dispatch({
//   type:'SENT_MESSAGE',
//   sentMessage});
console.log(sentItem)
}
changeHandler = (e) => {
this.props.dispatch({
type: 'SENT_MESSAGE',
payload: e.target.value
});
}
render() {
return (
<Modal trigger={<Button animated inverted color='blue'>
<Button.Content visible>Compose</Button.Content>
<Button.Content hidden>
<Icon name='plus'/>
</Button.Content>
</Button>} closeIcon>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Input fluid label='To' type="text" className='txtBox' name="to" value={this.state.to} onChange={this.changeHandler}/>
<Form.Input fluid label='Cc' type="text" className='txtBox' name="cc"value={this.state.cc} onChange={this.changeHandler}/>
<Form.Input fluid label='Bcc' type="text" className='txtBox'name="bcc"value={this.state.bcc} onChange={this.changeHandler}/>
<Form.Input fluid label='Subject' type='text' className='txtBox'name="subject" value={this.state.subject} onChange={this.changeHandler}/>
<Button animated inverted color='blue'><Button.Content visible>Send</Button.Content>
<Button.Content hidden>
<Icon name='envelope'/>
</Button.Content>
</Button>
<Button animated inverted color='red'><Button.Content visible>Discard</Button.Content>
<Button.Content hidden>
<Icon name='remove circle'/>
</Button.Content>
</Button>
</Form>
</Modal.Content>
</Modal>
);
}
}
function mapStateToProps(state) {
return {
sentItem: state.sentMessage
}
}
const dispatchToProps = (dispatch) => {
return {
sentBox: (sentMessage) => {
dispatch(storeActions.sentBox(sentMessage))
},
}
};
// connect to store
export default connect(
mapStateToProps,
dispatchToProps
)(Compose);

在 redux 折叠器中，缩减器文件：

import actions from './actions';
const initialState = {
sentMessage: []
}
const emailReducer = (state = initialState, action) => {
switch (action.type) {
case actions.SENT_MESSAGE:
return {
...state,
sentMessage: state.sentMessage.concat(action.payload)
};
default:
return state;
}
}

export default emailReducer;

在操作文件中：

const actions = {
SENT_MESSAGE: "SENT_MESSAGE",
}
export default actions;

店内操作.js：

import actions from './actions';
export function sentBox(sentMessage) {
return function(dispatch) {
dispatch({ type: actions.SENT_MESSAGE, payload: sentMessage });
};
}

第二个组件：

import React, {Component} from 'react';
import { connect } from "react-redux";
import {Grid, Input} from 'semantic-ui-react'
import * as storeActions from "../redux/storeActions";
class SentItem extends Component {
render(){
return(
<Grid.Row className="row message" >
<Grid.Column width={1} className="myCheckbox">
<Input type="checkbox"/>
</Grid.Column>
<Grid.Column width={2} >
<i className="star fa fa-star"></i>
</Grid.Column>
<Grid.Column width={12}> sentMessage {this.props.sentMessage.map(msg => JSON.stringify(msg) )} 
</Grid.Column>       
</Grid.Row>
);
}
}


function mapStateToProps(state) {
return {
sentMessage: state.sentMessage
};
}
const dispatchToProps = dispatch => {
return {
sentBox: () => {
dispatch(storeActions.sentBox())
},
}}

// connect to store
export default connect(
mapStateToProps,
dispatchToProps
)(SentItem);

Answer 1

有很多事情需要改进：-

1(如果您已经在使用箭头函数，则不需要在构造函数中绑定函数(this.changeHandler = this.changeHandler.bind(this);- 可以删除此行(。

2( 您应该在函数结束时调用this.props.sentBox(sentItem)handleSubmit以调度有效负载为sentItem的操作。

3( 应更正changeHandler函数，否则不会为不同的输入填充正确的状态。

changeHandler = ({target}) => {
const name = target.name;
const value = target.value;
this.setState({ [name]: value })
}

让我们知道您在这些更正后遇到的任何错误。

希望有帮助!!