MapStateToProps 给了我未定义的错误答案

【问题标题】：MapStateToProps is giving me undefined errorMapStateToProps 给了我未定义的错误
【发布时间】：2020-07-01 08:00:50
【问题描述】：

我正在尝试像这样使用 mapStateToProps ：

const mapStateToProps = (state: { logedIn: boolean; } ) => {
return {
    logedIn: state.logedIn
}
}

我正在创建 typescript react 应用程序。我尝试在我的编辑器中使用 ctrl 搜索来搜索已登录，并且发现它处于应为的初始状态。但是当我在做 npm start 时，我收到了这个错误：

  TypeError: Cannot read property 'logedIn' of undefined
Function.mapStateToProps [as mapToProps]
src/components/LogIn/Login.tsx:79
  76 | 
  77 | const mapStateToProps = (state: { logedIn: boolean; } ) => {
  78 |     return {
> 79 |         LogedIn: state.logedIn
  80 |     }
  81 | }
  82 |

这是我的初始状态

interface IAppState {
    logedIn : Boolean;
}

const initialState : IAppState = {
    logedIn  : false
};

 const reducer = (state = initialState, action : any) => {
    switch (action.type) {
        case actionTypes.LOG_IN:
            return {
                ...state,
                logedIn: true
            }
        case actionTypes.LOG_OUT:
            return {
             ...state,
             logedIn: false
            }
    }
}

创建商店：

export const store = createStore(reducer)

我在这里也遇到错误，说没有重载与“reducer”匹配

减速机：

   import {actionTypes} from "./actionTypes";

 export const LogedIn = () => {
    return {
        type:actionTypes.LOG_IN
    }
}

export const LogOut = () => {
    return {
        type:actionTypes.LOG_OUT
    }
}

有什么建议吗？我真的被这些卡住了

【问题讨论】：

能否添加reducer的代码？您在 createStore 中使用的 reducer 变量的类型是什么。
我更新了帖子。
用const reducer:Reducer<IAppState>替换const reducer
还有import { Reducer } from 'redux';
现在它在 const reducer 上给了我这个错误：ReducerTS2322: Type '(state: IAppState | undefined, action: any) => { logedIn: boolean; } | undefined' is not assignable to type 'Reducer<IAppState, AnyAction>'. Type '{ logedIn: boolean; } | undefined' is not assignable to type 'IAppState'. Type 'undefined' is not assignable to type 'IAppState'.

标签： reactjs typescript react-redux

【解决方案1】：

createStore 接受初始状态作为第二个参数：

createStore(reducer, [preloadedState], [enhancer])

在您的情况下，您不需要初始化商店：

export const store = createStore(reducer, initialState)

【讨论】：

谢谢你的回答，但还是不行
什么不起作用？你能举一个可重现的例子吗？ codesandbox, How to create a Minimal, Reproducible Example
我完全按照你告诉我的做，但它仍然给我同样的减速器错误
尝试在mapStateToProps 中记录state 看看它有什么。

【解决方案2】：

你得到的错误 TypeError: Cannot read property 'logedIn' of undefined 是因为传递给mapStateToProps 的state 是未定义的。您正在创建商店而不传递初始状态。您可以像这样解决该错误

export const store = createStore(reducer)

将reducer代码替换为

 const reducer:Reducer<IAppState> = (state:IAppState = initialState, action : any) => {
    switch (action.type) {     
        case actionTypes.LOG_IN:
            return {
                ...state,
                logedIn: true
            }
        case actionTypes.LOG_OUT:
            return {
             ...state,
             logedIn: false
            }
    }
}

如需了解 Redux，请通过this medium article

【讨论】：

它仍然给我错误TS2322: Type '(state: IAppState | undefined, action: any) => { logedIn: boolean; } | undefined' is not assignable to type 'Reducer<IAppState, AnyAction>'. Type '{ logedIn: boolean; } | undefined' is not assignable to type 'IAppState'. Type 'undefined' is not assignable to type 'IAppState'

【解决方案3】：

如果条件不满足，你会忘记在 switch 中返回状态

    const reducer = (state = initialState, action: any) => {
  switch (action.type) {
    case actionTypes.LOG_IN:
      return {
        ...state,
        logedIn: true
      }
    case actionTypes.LOG_OUT:
      return {
        ...state,
        logedIn: false
      }
    default:
      return state
  }
}

【讨论】：