Question

在Electrode框架下处理同构应用程序并且遇到调试问题我无法解决。我相信，这里的框架并不重要，您可以轻松地重现。

使用：Redux，redux-thunk，redux-promise-middleware，redux-devtools-extension（有助于使用Chrome扩展程序调试redux流量）。

问题是我没有收到使调试成为地狱的子元素的信息性异常。

对于如何修复它的任何提示都会非常感激。提供参考的简化代码：

import React from "react";
import { render } from "react-dom";
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import { applyMiddleware, createStore } from 'redux';
import { connect } from "react-redux";
import { composeWithDevTools } from 'redux-devtools-extension';

const rootReducer = function(state = { test: false }, action) {
  switch (action.type) {
    case 'TEST_FULFILLED': {
      state = {
        ...state,
        test: true
      };
      break;
    }
  }
  return state;
};

  const store = createStore(
    rootReducer,
    composeWithDevTools(
      applyMiddleware(promise(), thunk)
    )
  );

  const asyncCallAction = () => dispatch => {
    dispatch({
      type: 'TEST',
      payload: new Promise(resolve=>{
        resolve(true)
      })
    });
  };

  class Test extends React.Component {
    componentWillMount() {
      this.props.asyncCall();
    }

    render() {
      const { test } = this.props;
      console.log('Test Value: ', test)
      return (
        <div>
          If test passed you should see the output below, or the exception in console:

          {
            test && // No exception shown regarding the invalid child element shown
            // test && // If commented, shows the exception from the invalid child element
            <ElementWithError someState={true} />
          }
        </div>
      );
    }
  }

  class ElementWithError extends React.Component {
    render() {

      ThrowError(); // Expecting: ThrowError is not defined exception

      return <div>
        Test Passed
      </div>
    }
  }

  const mapStateToProps = state => {
    return {
      test: state.test
    };
  };


  const Render = connect(mapStateToProps, dispatch => ({
    dispatch,
    asyncCall: ()=>dispatch(asyncCallAction()),
  }))(Test);


  render(
    <Render store={store} />,
    document.querySelector('.js-content')
  );

React + Redux：使用dispatch调试地狱（{..，payload：promise}）

0 个答案: