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

【问题标题】：I am getting initialization error in the following react-redux code我在以下 react-redux 代码中遇到初始化错误
【发布时间】：2019-07-25 12:38:05
【问题描述】：

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

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);

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

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

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

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

在 Reducer 中，我们通过在 JS switch 中提供 -commonly- 一个 case with - 来捕获分派的 Action，该案例与被分派的 Action Type 相匹配，我们执行逻辑，返回一个新状态以更新状态- 在那个 Reducer 中。

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

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

假设您正在使用 switch 来控制减速器的行为：

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;
    }
}

【讨论】：

【解决方案2】：

在切换您的 Counter 和 isLogged 组件时插入默认大小写：

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

export default counterReducer;

【讨论】：

【解决方案3】：

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

} 导出默认counterReducer；

如下更改此代码

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

} 导出默认counterReducer；

【讨论】：