反应减速器给出错误

Posted 2023-02-23

【中文标题】反应减速器给出错误

【英文标题】：React reducer giving error

【发布时间】：2018-03-11 07:52:41

【问题描述】：

我有一个文件，其中包含我的 redux 操作和 reducer。我从我的一个组件调用操作，但我收到一条错误消息

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)

这是错误的屏幕截图

我做错了什么？我需要在减速器中包含其他任何内容吗？

【参考方案1】：

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

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

【讨论】：

这就是我正在做的。对吗？

不，不是。您正在分配 state = ...

另外，默认：除非其他情况不运行，否则返回状态不会运行。

【参考方案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