Question

我有一个文件，其中包含我的redux动作和减速器。我从我的一个组件调用操作但是我收到错误说

Error: Given action "GLOBAL_TRIVIA_TAB_CHANGED", reducer "TriviaReducer" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.

这是我的行动和减少者所在的文件

const INITIAL_STATE = {
    selectedGlobalTriviaTab: 1,
    selectedLocalTriviaTab: 1
}

const GLOBAL_TRIVIA_TAB_CHANGED = 'GLOBAL_TRIVIA_TAB_CHANGED'
const globalTriviaTabChanged = (tab)=> ({
    type: GLOBAL_TRIVIA_TAB_CHANGED,
    payload: tab
})

const LOCAL_TRIVIA_TAB_CHANGED = 'LOCAL_TRIVIA_TAB_CHANGED'
const localTriviaTabChanged = (tab)=> ({
    type: LOCAL_TRIVIA_TAB_CHANGED,
    payload: tab
})


export const actions = {
    globalTriviaTabChanged,
    localTriviaTabChanged
}



export default function TriviaReducer(state = INITIAL_STATE, action){
    switch(action.type){
        case GLOBAL_TRIVIA_TAB_CHANGED:
            state = {...state, selectedGlobalTriviaTab : action.payload};
            break;
        case LOCAL_TRIVIA_TAB_CHANGED:
            state = {...state, selectedLocalTriviaTab: action.payload};
            break;
        default:
            return state
    }
}

我正在调用我的组件渲染方法

import {actions} from "../../store/Trivia";

class TriviaPanel extends Component {

    state = {
        selectedGlobalTriviaTab: 1
    }

    toMovies(){
        this.setState({selectedGlobalTriviaTab: 1})
    }
    toPerson(){
        this.setState({selectedGlobalTriviaTab: 2})
    }
    toLocation(){
        this.setState({selectedGlobalTriviaTab: 3})
    }

    render() {
        let TabComponent;

        if(this.state.selectedGlobalTriviaTab === 1){
            TabComponent = <Movies/>
            this.props.globalTriviaTabChanged(1)   //calling redux-action
        }
        else if(this.state.selectedGlobalTriviaTab === 2){
            TabComponent = <Person/>
          //this.globalTriviaTabChanged(2)    //calling redux-action
        }

        return (
            <div className="tabbed-panel">
                <div className="tabs">
                    <div className={`tab ${this.state.selectedGlobalTriviaTab === 1? "active" : ""}`} onClick={this.toMovies.bind(this)}><div className="tab-inner">MOVIES</div></div>
                    <div className={`tab ${this.state.selectedGlobalTriviaTab === 2? "active" : ""}`} onClick={this.toPerson.bind(this)}><div className="tab-inner">PERSON</div></div>
                    <div className={`tab ${this.state.selectedGlobalTriviaTab === 3? "active" : ""}`} onClick={this.toLocation.bind(this)}><div className="tab-inner">LOCATION</div></div>
                </div>
                {TabComponent}
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch)=> ({
    globalTriviaTabChanged(value){
        return dispatch(actions.globalTriviaTabChanged(value))
    },
    localTriviaTabChanged(value){
        return dispatch(actions.localTriviaTabChanged(value))
    }
})

export default connect(null, mapDispatchToProps)(TriviaPanel)

这是errror的屏幕截图

我做错了什么？我是否需要在减速机中包含其他任何东西？

Answer 1

您正在直接改变状态，然后不在reducer中返回任何内容。您需要返回一个包含您的状态和要添加的任何新属性的新对象。

switch(action.type){
    case GLOBAL_TRIVIA_TAB_CHANGED:
        return {...state, selectedGlobalTriviaTab : action.payload};
    case LOCAL_TRIVIA_TAB_CHANGED:
        return {...state, selectedLocalTriviaTab: action.payload};
    default:
        return state
}

Answer 2

您并非从您的reducer中返回新状态。

state = {...应为return {...。

完整更改集：

export default function TriviaReducer(state = INITIAL_STATE, action){ switch(action.type){ case GLOBAL_TRIVIA_TAB_CHANGED: return {...state, selectedGlobalTriviaTab : action.payload}; break; case LOCAL_TRIVIA_TAB_CHANGED: return {...state, selectedLocalTriviaTab: action.payload}; break; default: return state } }

React reducer给出错误

2 个答案: