使用Redux的简单提交表单

Question

我正在尝试创建一个简单的表单应用程序，其中将有一个文本区域输入和一个提交按钮。其中，如果我在文本区域键入一些内容，然后单击提交，我刚刚键入的文本将显示在标签内的按钮下。当我在没有Redux的情况下这样做时，它工作得很好，即使在我使用Redux之后，这部分意味着当我只使用Redux管理一个状态(输入字段状态(时，它也很好。但当我做两个减速器，两个调度时，问题就发生了。这是我的密码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Provider from 'react-redux/es/components/Provider';
import {
createStore,
applyMiddleware,
combineReducers,
} from 'redux';
import { getInput, getOutput } from './reducer';
import { createLogger } from 'redux-logger';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootReducer = combineReducers({
getInput,
getOutput,
});
const logger = createLogger();
const store = createStore(
rootReducer,
applyMiddleware(logger)
);
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);

reportWebVitals();

app.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
changeInput,
postOutput,
} from './action';
import {
Form,
Button,
Container,
} from 'react-bootstrap';
const mapStateToProps = (state) => {
return {
input: state.getInput.input,
output: state.getOutput.output,
};
};
const mapDispatchToProps = (dispatch) => {
return {
handleInput: (event) =>
dispatch(changeInput(event.target.value)),
handleClick: (props) =>
dispatch(postOutput(props.output)),
};
};
class App extends Component {
// constructor() {
//  super();
//  this.state = {
//      output: '',
//  };
// }
// handleInput = (event) => {
//  this.setState({ input: event.target.value });
// };
// handleClick = () => {
//  this.setState({
//      output: this.props.input,
//  });
// };
render() {
return (
<div>
<Container>
{' '}
<Form>
<Form.Group controlId='exampleForm.ControlTextarea1'>
<div>
<div
style={{
display: 'flex',
justifyContent: 'center',
marginTop: '20px',
marginBottom: '10px',
}}>
<Form.Control
as='textarea'
rows={5}
placeholder='enter something here'
onChange={this.props.handleInput}
style={{ width: '500px' }}
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}>
<Button
variant='primary'
onClick={this.props.handleClick}>
Submit
</Button>
</div>
</div>
</Form.Group>
</Form>
</Container>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}>
<h1 value={this.props.input}>
{this.props.output}
</h1>
</div>
</div>
);
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);

action.js

import {
CHANGE_INPUT_FIELD,
POST_OUTPUT,
} from './constant';
export const changeInput = (text) => ({
type: CHANGE_INPUT_FIELD,
payload: text,
});
export const postOutput = (text) => ({
type: POST_OUTPUT,
payload: text,
});

reducer.js

import {
CHANGE_INPUT_FIELD,
POST_OUTPUT,
} from './constant';
const initialStateInput = {
input: '',
};
const initialStateOutput = {
output: '',
};
export const getInput = (
state = initialStateInput,
action = {}
) => {
switch (action.type) {
case CHANGE_INPUT_FIELD:
return Object.assign({}, state, {
input: action.payload,
});
default:
return state;
}
};
export const getOutput = (
state = initialStateOutput,
action = {}
) => {
switch (action.type) {
case POST_OUTPUT:
return Object.assign({}, state, {
output: action.payload,
});
default:
return state;
}
};

constant.js

export const CHANGE_INPUT_FIELD =
'CHANGE_INPUT_FIELD';
export const POST_OUTPUT = 'POST_OUTPUT';

Answer 1

1. changeInput操作必须在组件内部处理-没有理由调度操作并使用reducer处理，因为reducer用于管理共享状态。

2. 你能指定什么是"；问题"；？

Answer 2

1. 问题不在于操作，因为值设置为undefined，所以看不到值
2. 在App.js中，您必须传递正确的值onClick={this.props.handleClick}>必须更改为onClick={this.props.handleClick(this.props)}>，否则props将等于行handleClick: (props) => dispatch(postOutput(props.output))中的事件对象
3. 尽管如此，您不会在UI中看到该值，因为输出值被设置为''，因为您没有在reducer中将输入值设置为输出值
4. 我的建议是，当点击提交按钮并将当前输入值设置为该输入时，必须有另一个动作触发，然后触发getOutput