Javascript ReactJs/Redux在reducer调用之间维护状态

好吧，毫无疑问，这是一个noob问题，但我在搜索中找不到好的答案。我已经构建了一个简单的ReactJs/Redux应用程序，它看起来运行良好，只是当我在页面上更改一个值时，它会在状态显示中删除另一个值。我不知道问题是在我的状态显示中，还是我意外地改变了状态。欢迎在此环境中提供有关最佳实践和/或调试的建议

我有一个文本框和一个下拉列表，显示状态（我想）。当我更改下拉列表或文本框时，另一个值变为空白（在我的显示器中）

这是我的容器：

import { connect } from 'react-redux';
import {
    changeLogFilterMessageContains,
    changeTestDropdownSelectedValue
} from '../actions';
import { LogsPage } from '../components/LogsPage';

const mapStateToProps = (state, ownProps) => ({
    logFilters: state.logFilters,
});

const mapDispatchToProps = {
    changeLogFilterMessageContains,
    changeTestDropdownSelectedValue,
};

const LogsPageContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(LogsPage);

export default LogsPageContainer;    

还有我的日志：

import React, {
    Component,
} from 'react';

export class LogsPage extends Component {
    render() {
        return (
            <div>
                <h1>Logs Page</h1>
                <p>Message contains:
                    <input type="text" value={this.props.logFilters.logFilterMessageContains}
                        onChange={e => this.props.changeLogFilterMessageContains({ logFilterMessageContains: e.target.value })} />
                    <br />
                    <select onChange={e => this.props.changeTestDropdownSelectedValue({ testDropdownSelectedValue: e.target.value })}>
                        <option value=""></option>
                        <option value="One">One</option>
                        <option value="Two">Two</option>
                        <option value="Three">Three</option>
                        <option value="Four">Four</option>
                    </select>
                </p>
                <ul>
                    <li>logFilterMessageContains: {this.props.logFilters.logFilterMessageContains}</li>
                    <li>testDropdownSelectedValue: {this.props.logFilters.testDropdownSelectedValue}</li>
                </ul>
            </div>
        );
    }
}

export default LogsPage;

还有，我的行动：

export const activateGeod = geod => ({
    type: 'ACTIVATE_GEOD',
    geod,
});

export const closeGeod = () => ({
    type: 'CLOSE_GEOD',
});

export const changeLogFilterMessageContains = logFilterMessageContains => ({
    type: 'CHANGE_LOG_FILTER_MESSAGE_CONTAINS',
    logFilterMessageContains,
});

export const changeTestDropdownSelectedValue = testDropdownSelectedValue => ({
    type: 'CHANGE_TEST_DROPDOWN',
    testDropdownSelectedValue,
});

我肯定我遗漏了一些基本的东西，所以如果有人知道如何让我直截了当的话，我会非常感谢你的帮助

---

V

我最近学会了如何使用redux，我发现这是检查自己的最佳地方：。说话的人是redux的Grandady，他解释了所有的细节

我学到的第二件事是，确保你对每件事都进行了测试；动作创造者、还原者和商店

看看你的

组合减速机

，你商店的状态会是这样的

{
    geod: *somevalue*,
    logFilters: *somevalue*
}

logFilters

的值由

logFilters

减速机确定

您的

logFilters

reducer返回操作“payload”。您已经调用了这些特定名称logfiltersessagecontains&testDropdownSelectedValue，但是返回的值将成为商店状态下的

logFilters

的值。您可以使用

{this.props.logfilters}

在连接的组件中访问此值（因为

MapStateTops

的结构）

查看代码，我认为组件中不存在

this.props.logFilters.logFilterMessageContains

。

logFilterMessageContains

变量仅存在于reducer和action创建者的范围内。此变量的值仅在调度

changelogfiltersessagecontains

后，才在存储状态下设置

logFilters

的值

考虑将

日志过滤器

减速机拆分为两个单独的减速机。看起来你正试图用它来控制两个独立变量

---

有什么问题吗？

谢谢你的建议；我要了。一个问题：所以，我需要一个状态中每个自变量的减缩器？我会说是的。combine reducer函数将它们合并为一个单独的reducer，您可以自己编写，但我发现让该函数减轻一些复杂性更容易。。

{
    geod: *somevalue*,
    logFilters: *somevalue*
}