reactjs - 我在以下 react-redux 代码中遇到初始化错误

Question

我收到以下错误:Reducer "counter"returned undefined during initialization 如果传递给 reducer 的状态未定义，则必须显式返回初始状态。初始状态可能不是未定义的。如果你不想为这个 reducer 设置值，你可以使用 null 而不是 undefined。
当我尝试组合 2 个 reducer 时出现此错误。

import counterReducer from "./counter"
import loggedReducer from "./isLogged"
import {combineReducers} from "redux"

const allReducer = combineReducers({
    counterReducer,
    loggedReducer
})

export default allReducer

我的 counter-reducer 文件代码是:

const counterReducer = (state ={counter:0},action) =>{
    switch(action.type){
        case "INCREMENT":
            return state.counter + 1
        case "DECREMENT":
            return state.counter - 1    
    }
}
export default counterReducer;

我的 index.js 代码是:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import "bootstrap/dist/css/bootstrap.min.css"
import App from './App';
import * as serviceWorker from './serviceWorker';
import {createStore} from "redux";
import allReducer from "./Reducers"

const store = createStore(allReducer);

运行最后一行时出现上述错误。

Answer 1

这被称为 Redux 初始化错误，它发生在 Redux 在您的应用程序的第一次挂载时触发多个调度时，它是第一次被初始化的地方。

从 reducer 工作原理背后的逻辑来看，dispatch对于 redux 中的 Action，它旨在告诉特定的 Reducer，其中的某些数据需要根据分派(dispatch)的 Action Type/Payload 进行更改。

在 Reducer 中，我们通过在 JS switch 中提供 -commonly- 一个 case 来捕获分派(dispatch)的 Action匹配被调度的 Action 类型，我们执行逻辑，返回一个新状态以更新该 reducer 中的状态。

既然这是 Redux 中 Action 和 Reducer 之间通信的正常流程和行为，而且我们现在知道 Redux 在第一次挂载时会触发一个 Initialization Action，那么我们提供什么情况来处理这个 Initialization Action？因为我们使用switch它必须是 default js案例switch !

考虑添加 default每个 Reducer 末尾的 case 以捕获特定 reducer 的所有非相关操作，例如初始化操作或应用程序周围的任何其他非处理操作。

假设您正在使用 switch控制 reducer 的行为:

switch(action.type){
  //..Some special cases you have written.
  // The next 3 lines fix the problem.. add it to the end of each of the reducers you have in your app.
    default: {
        return state;
    }
}