Reactjs 使用Redux的简单提交表单

我正在尝试创建一个简单的表单应用程序，其中将有一个textarea输入和一个submit按钮。其中，如果我在文本区域中键入内容，然后单击提交，我刚才键入的文本将显示在标记内的按钮下方。当我在没有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();

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

常数.js

export const CHANGE_INPUT_FIELD =
    'CHANGE_INPUT_FIELD';

export const POST_OUTPUT = 'POST_OUTPUT';

changeInput

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

你能具体说明“问题”是什么吗

问题不在于操作，您无法看到该值，因为该值设置为

undefined

在App.js中，必须传递正确的值

onClick={this.props.handleClick}>

必须更改为

onClick={this.props.handleClick（this.props）}>

否则props将等于行

handleClick：（props）=>dispatch（postfoutput（props.output））

您仍然无法在UI中看到该值，因为输出值设置为

'

，因为您没有在reducer中将输入值设置为输出值

我的建议是，当单击submit按钮并将当前输入值设置为输入时，必须有另一个操作触发，然后触发

getOutput

---

当我单击提交时，不会显示任何内容。我知道派handleClick去是愚蠢的。我只是在练习redux，只是为了练习。你能帮我写代码，这样我就能更好地了解情况，这对我有很大帮助，因为我正在学习

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

export const CHANGE_INPUT_FIELD =
    'CHANGE_INPUT_FIELD';

export const POST_OUTPUT = 'POST_OUTPUT';