防止组件中再次使用 redux 存储值

Question

我学习了 React JavaScript，现在我有一个关于 React Redux 的问题。

我有一个组件可以监听一个被磨损的 Redux 存储值 newTag

这是组件：

/*
 * Component handles creating new Tags
 */
class AddTag extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tagName: '',
            categoryName: '',
        };
    }

    submit = () => {
        const { tagName, categoryName } = this.state;
        const { tagsTag, tagsCategories } = this.props;
        // Test if the tag is already created
        const result = tagsTag.find(tag => tag.name === tagName);
        if (result) {
            if (result.category.name === categoryName.name) console.log('jj');
        }
        const { saveTag } = this.props;
        saveTag(tagName.trim(), categoryName);
    };

    changeCategoryName = categoryName => {
        this.setState({
            categoryName,
        });
    };

    changeTagName = tagName => {
        this.setState({
            tagName,
        });
    };

    render() {
        const { classes, tagsCategories, isSavingNewTagStarted, newTagErrMsg, newTag } = this.props;
        const { tagName, categoryName } = this.state;

        return (
            <Container className={classes.root}>
                <Typography className={classes.typography} gutterBottom variant="h6" align="left">
                    Type the new Tag name and select the Tag category
                </Typography>
                <div>
                    <TextField
                        className={classes.tagTextField}
                        id="outlined-basic"
                        label="New Tag Name"
                        placeholder="New Tag Name"
                        variant="outlined"
                        value={tagName}
                        onChange={e => this.changeTagName(e.target.value)}
                        autoComplete="off"
                        InputProps={{
                            className: classes.inputBackground,
                        }}
                        InputLabelProps={{
                            className: classes.inputLabel,
                        }}
                    />
                    <FormControl>
                        <InputLabel id="category-select">Category</InputLabel>
                        <Select
                            className={classes.selectInput}
                            labelId="category-select"
                            id="demo-simple-select-helper"
                            value={categoryName}
                            onChange={e => this.changeCategoryName(e.target.value)}
                        >
                            {tagsCategories &&
                                tagsCategories.map((element, index) => {
                                    return element.name !== 'All Tags' ? (
                                        <MenuItem value={element} key={element.id}>
                                            {element.name}
                                        </MenuItem>
                                    ) : null;
                                })}
                        </Select>
                    </FormControl>
                    <Button
                        className={classes.button}
                        onClick={() => this.submit()}
                        variant="contained"
                        color="primary"
                        disabled={!tagName || !categoryName}
                    >
                        Save Tag
                    </Button>
                    {newTagErrMsg && <p className="error">{newTagErrMsg.message}</p>}
                    {newTag && <p>New Tag was saved!</p>}
                </div>
                <div>{isSavingNewTagStarted ? <Dots /> : null}</div>
            </Container>
        );
    }
}

const mapDispatchToProps = dispatch => ({
    saveTag: (name, category) => dispatch(saveNewTag(name, category)),
});

const mapStateToProps = state => {
    return {
        tagsCategories: state.global.tagsCategories,
        tagsTag: state.global.tags,
        isSavingNewTagStarted: state.global.isSavingNewTagStarted,
        newTagErrMsg: state.global.newTagErrMsg,
        newTag: state.global.newTag,
    };
};
const enhance = compose(withStyles(styles), connect(mapStateToProps, mapDispatchToProps));
export default enhance(AddTag);

保存新标签时，此代码行为真：

    {newTag && <p>New Tag was saved!</p>}

问题是newTag来自 Redux store 是在新标签被保存之后，总是如此。因此，这意味着文本“新标签已保存”将始终可见。

我想知道一种重置 Redux 存储的方法，newTag以便稍后渲染后不会显示文本“新标签已保存”。

• 我应该向商店发送呼叫并设置newTag为“无”（它不在其他任何地方使用）
• 我应该创建一些localstorage变量来使用并测试是否newTag与之前相同，那么“新标签已保存”将不会显示。

是否有一些我错过的 Redux 方式方法？

这是我认为遵循众所周知的实践的减少。

import { globalActionTypes } from './global.types';

const INIT_STATE = {
    tags: [],
    tagsCategories: [],

    isSavingNewTagStarted: false,
    newTag: '',
    newTagErrMsg: '',
};

const globalReducer = (state = INIT_STATE, action) => {
    switch (action.type) {
        // SET_TAGS_ADDED
        case globalActionTypes.SET_TAGS:
            return {
                ...state,
                tags: action.payload,
            };
        // SET_TAGS_CATEGORIES
        case globalActionTypes.SET_TAGS_CATEGORIES:
            return {
                ...state,
                tagsCategories: action.payload,
            };
        // ADD_NEW_TAG
        case globalActionTypes.ADD_NEW_TAG_START:
            return {
                ...state,
                isSavingNewTagStarted: true,
            };
        case globalActionTypes.ADD_NEW_TAG_SUCCESS:
            return {
                ...state,
                isSavingNewTagStarted: false,
                newTag: action.payload,
            };
        case globalActionTypes.ADD_NEW_TAG_FAILURE:
            return {
                ...state,
                isSavingNewTagStarted: false,
                newTagErrMsg: action.payload,
            };
        default:
            return state;
    }
};

export default globalReducer;

Answer 1

尝试传递...state到默认情况

default:
  return {
    ...state
  }