奇怪的错误反应 redux 让我发疯答案

【问题标题】：Weird bug react redux drive me crazy奇怪的错误反应 redux 让我发疯
【发布时间】：2020-12-15 11:05:53
【问题描述】：

今天我遇到了一个让我发疯的错误！我正在使用 react with redux ，以前从未见过这样的错误。问题是我的redux调度函数的“第二个参数”总是返回我所有的REDUX状态，所有其他参数都在工作并返回我他们必须返回的东西！除了 2ND 谁总是返回所有的状态？这是什么魔法

this.props.sendPushNotification(); // even with empty parameters return the second parameters with all the redux state


const mapDispatchToProps = dispatch => ({


  sendPushNotification: dispatch.notifications.sendPushNotification,

});



// my redux function  

async sendPushNotification (token, title , body , data) {
    
    
    console.log(token) // return undefined
    
    console.log(title) // ALWAYS RETURN ALL THE STATE / PROPS FROM REDUX EVEN IF THERE IS NO PARAMETERS 

console.log(body) // return undefined
console.log(data) // return undefined
    
    
    
    }

【问题讨论】：

为什么不抛出：sendPushNotification: dispatch.notifications.sendPushNotification？当尝试将dispatch.notifications.sendPushNotification() 作为函数执行时，这肯定会引发异常。
它什么都没扔？
为什么要抛出异常？

标签： reactjs redux

【解决方案1】：

是的，您当前的mapDispatch 代码非常错误。

首先，根据我们的文档，you should be using the "object shorthand" form of mapDispatch instead of the function form：

const mapDispatch = {
  sendPushNotification: notifications.sendPushNotification,
}

其次，如果你打算将mapDispatch写成一个函数，现在由你来决定传入的dispatch参数，并用它来创建新的动作调用时调度：

const mapDispatch = dispatch => ({
  sendPushNotification: (...args) => dispatch(notifications.sendPushNotification(...args))
})

第三...我不知道你为什么要写dispatch.notifications.sendPushNotification。商店的 dispatch 方法上不应该有任何嵌套字段，所以看起来它应该是开箱即用的。

最后，至于“从传入的 Redux 存储中获取所有道具”部分......我只能假设您的函数被解释为某种 thunk，因此它有 getState 作为传入第二个参数。

但实际上，这里的问题是您的mapDispatch 代码错误。请修复它。

【讨论】：

【解决方案2】：

它没有扔任何东西

是的，确实如此，为什么你要在你的问题中发布不起作用的代码？

为什么它应该抛出异常？

见下文 (Cannot read property 'sendPushNotification' of undefined")：

const { Provider, connect } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;

const initialState = {};

const reducer = (state) => state;
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware(() => (next) => (action) =>
      next(action)
    )
  )
);
const mapDispatchToProps = (dispatch) => ({
  sendPushNotification:
    dispatch.notifications.sendPushNotification,
});
const App = connect(
  undefined,
  mapDispatchToProps
)(()=>'hi');

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>

【讨论】：