时间戳

首页 > 解决方案 > TypeError：我的搜索栏 redux 上未定义操作

javascript - TypeError：我的搜索栏 redux 上未定义操作

问题描述

这周我一直在尝试创建一个搜索栏过滤器，所以我创建了一个 redux 来改变搜索栏上输入值的状态。当我尝试从正确连接的 redux 开始时，假设错误在我的搜索栏减速器内，它会给我“动作未定义”。你们能帮我解决这个问题吗？

这是我的搜索栏（输入和按钮）和我的 MapStateToProps

                <div className={classes.searchbar} id="searchbar">
                <form id="Searchbar">
                  <input 
                    type="text" 
                    class="parametro" 
                    id="parametro" 
                    onChange={(e) => Filter(e.target.value)}
                    value={value}
                   />

                    <Searchbar link={"/produtos?nome=" + value}>    
                        <button type="submit" >
                            Pesquisar!
                        </button>
                    </Searchbar>
                </form>
            </div>

const mapStateToProps = state => {
return {
    isAuthenticated: state.authRdc.token,
    value: state.searchbarRdc.searchbar
};

};

这是我的减速器：

import * as actionTypes from 'store/actions/actionTypes';
import { updateObject } from 'utils/updater';

const initialState = {
    value: null,
    parametro: null
}

const Filter = (state, action) => {
    return updateObject(state, { value: action.searchbar });
}

const reducer = (state = initialState, action) => {

    switch (action.type) {
        case actionTypes.UPDATE_FILTER:
            return Filter(state, action);

        default:
            return state;
    }
}

export default reducer;

和我的行动：

import * as actionTypes from './actionTypes';

export const Filter = (value) => {
    return {
        type: actionTypes.UPDATE_FILTER,
        value: value
    }
}

标签： javascriptreactjsreduxreact-redux

解决方案

我猜你已经完成了这个话题并且你已经是一个 redux pro 了。但是，您似乎忘记了 switch-case 中的中断语句。

这可能会导致错误。如果您仍在使用 redux，您可能已经知道新的redux 工具包。它可以更快地编写 redux 的每个部分，并帮助您保持更好的概览。由于类型安全，我建议使用打字稿，但这只是一个选择问题。

推荐阅读