javascript - ReactJs/Redux 维护 reducer 调用之间的状态

Question

好吧，毫无疑问，这是一个菜鸟问题，但我在搜索中找不到好的答案。我构建了一个简单的 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;

和我的 reducer :

import { combineReducers } from 'redux';

export const geod = (state = {}, action) => {
    switch (action.type) {
        case 'ACTIVATE_GEOD':
            return action.geod;
        case 'CLOSE_GEOD':
            return {};
        default:
            return state;
    }
};

export const logFilters = (state = {}, action) => {
    switch (action.type) {
        case 'CHANGE_LOG_FILTER_MESSAGE_CONTAINS':
            return action.logFilterMessageContains;
        case 'CHANGE_TEST_DROPDOWN':
            return action.testDropdownSelectedValue;
        default:
            return state;
    }
};

export const reducers = combineReducers({
    geod,
    logFilters
});

而且，我的行动:

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

Answer 1

我最近学习了如何使用 redux，我发现这是检查自己的最佳位置:https://egghead.io/courses/getting-started-with-redux 。说话的人是 redux 的鼻祖，他解释了这一切的基本原理。

我学到的第二件事是，确保对所有事情都进行测试； Action 创建者、减速者和存储。

看看你的combineReducers，你的商店的状态看起来像这样

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

logFilters 的值由您的 logFilters 缩减器确定。

您的logFilters reducer 返回操作“有效负载”。您已经调用了这些特定名称 logFilterMessageContains 和 testDropdownSelectedValue，但返回的值将成为存储状态中 logFilters 的值。您可以使用 {this.props.logfilters} 在连接的组件中访问此值(因为 mapStateToProps 的结构)。

查看代码，我认为您的组件中不存在 this.props.logFilters.logFilterMessageContains 。 logFilterMessageContains 变量仅存在于您的reducer 和action 创建者的范围内。仅在调度 changeLogFilterMessageContains 后，此变量的值才会设置商店状态中 logFilters 的值。

考虑将您的 logFilters reducer 分成两个单独的 reducer 。看起来您正试图用它来控制两个自变量。

有什么问题吗？