在容器中访问 Reducer 返回 undefined

Posted 2023-02-22

【中文标题】在容器中访问 Reducer 返回 undefined

【英文标题】：Accessing Reducer in container returns undefined

【发布时间】：2019-04-28 02:19:37

【问题描述】：

我只是想在我的 React 应用程序中集成一个新的 Container，将它与 Redux 连接起来，只是想看看它是否能正常工作。然而并非如此。通过this.props.selection 访问reducer 给了我undefined。我不知道为什么。它确实可以在其他容器中工作，并且 reducer 具有一些明确定义的初始状态。 - 我不确定我看到这里有什么区别？我错过了一些琐碎的事情吗？

import React,  Component  from 'react'
import  connect  from 'react-redux';
import bindActionCreators from 'redux';

export class AudioPlayer extends Component 
  constructor(props) 
    super(props);
    this.state =  someComponentState : true 
  

  onLog() 
    console.log("Logging:");
    console.log(this.props.selection); // gives me: undefined
  
  render()     
    return (
      <div>
           <button onClick=()=> this.onLog()>LOG</button>
      </div>
    )
  


function mapStateToProps (state) 
  return 
    selection: state.selection
  ;


export default connect(mapStateToProps)(AudioPlayer);

PS：我已经稍微简化了这个组件，但我认为它仍然应该反映问题。

编辑：reducer 示例 人们要求查看减速器，但是，我已经尝试了几个已经在应用程序中实现并在其他容器中工作的减速器，所以我认为这不是问题所在 - 但谁知道：

import  SELECT_ITEM  from '../actions/types';

export default function(state = , action) 
  switch(action.type) 
    case SELECT_ITEM: 
      return ...state, error:'', selected: true;
  

  return state;

edit2：mapStateToProps 似乎根本没有被调用 我只是尝试在 mapStateToProps 中做一个 console.log，看看它是否被调用，似乎从来没有。没有任何记录。这可能是什么原因？

function mapStateToProps (state) 
    console.log("In map function");
    console.log(state);

  return 
    selection: state.selection, //both return
    auth: state.auth            // undefined
  ;

我还添加了另一个 reducer (auth)，它可以在应用程序的其他地方工作，但这里返回 undefined。

edit3：我的根减速器

import  combineReducers  from 'redux';
import  reducer as form  from 'redux-form';

//reducer imports
import authReducer from './auth_reducer';
import articlesReducer from './articles_reducer';
import userReducer from './user_reducer';
import currentSelectionReducer from './currentSelection_reducer';

const rootReducer = combineReducers(
  auth: authReducer,
  user: userReducer,
  articles: articlesReducer,
  selection: currentSelectionReducer,
);

export default rootReducer;

【问题讨论】：

你能显示设置initialState的代码吗？

我已经在应用程序中实现了几个减速器并且已经在使用这些减速器。所以如果问题出在reducer代码本身就会很奇怪。当然，我可以添加它。

是的，从代码中，我觉得state.selection 是未定义的，因此您将this.props.selection 视为未定义

是的，看起来就是这样，但我在应用程序的其他地方成功访问它并将其初始化为空对象。哦，还有一点很有趣的是，无论我使用哪个减速器（我的应用程序有多个），它总是在那个组件中给我 undefined，而在其他组件中它很好。

嗯，您提供的减速器适用于selected 字段。您在哪个 reducer 中管理 selection 字段？

【参考方案1】：

您可以尝试从“export class AudioPlayer extends Component”中删除“export”

您也可以查看：mapStateToProps not getting called at all

【讨论】：

是的，就是这样。双重出口声明。如此琐碎！非常感谢！对不起大家，谢谢大家！

【参考方案2】：

你的组件代码没问题。

在你的减速器中应该是

export default function(state =  selected: false , action) 

延伸阅读：

https://redux.js.org/recipes/structuringreducers/initializingstate https://***.com/a/37823335/2477619

【讨论】：

谢谢。这并没有解决我遇到的错误。我刚试了，还是得到undefined

应该。请仔细检查。

同时检查你是否访问了正确的reducer。在您的function mapStateToProps (state) 中放置一个console.log 以查看您的整个状态。

我仔细检查过，它不起作用。刚才控制台日志的事情，它似乎根本没有进入mapStateToProps。请参阅我的编辑号。 2. 非常感谢您的帮助。

不客气 :) 很高兴您通过接受的解决方案找到了您的问题。这确实很棘手；）

【参考方案3】：

1) 在您的调试中，请检查它在reducer 中输入确切的情况，它是否理解action.type == SELECT_ITEM，并返回新状态。

2) 另请注意 selection 是一个对象，其中包含“已选择”。 您的“selection”减速器包含：...state, error:'', selected: true

也许对此有误解？