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;

和我的LogsPage：

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;

和我的减速器

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的祖父，他解释了这一切的基本内容。

我学到的第二件事是，确保对所有内容进行测试。动作创建者，减速器和商店。

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

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

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

您的logFilters减速器返回操作“有效载荷”。您已经调用了这些特定名称logFilterMessageContains＆testDropdownSelectedValue，但是返回的值将成为商店状态下的logFilters值。您可以使用{this.props.logfilters}在连接的组件中访问此值（因为mapStateToProps的结构）。

查看代码，我认为您的组件中不存在this.props.logFilters.logFilterMessageContains。 logFilterMessageContains变量仅存在于减速器和动作创建者的范围内。仅在分派logFilters之后，此变量的值才将changeLogFilterMessageContains的值设置为商店状态。

考虑将您的logFilters减速器分成两个单独的减速器。看来您正在尝试使用它控制两个独立变量。

有什么问题吗？

ReactJs / Redux在reducer调用之间保持状态

1 个答案: