Question

所以在我的React组件中，我有这个：

decode('utf8')

我的this.props.updateAlertCallback('error', ERROR_MESSAGE)操作是：

updateAlertCallback

我收到以下错误：未捕获TypeError：dispatch（...）。然后不是函数

在export const updateAlert = (alert, message) => { return { type: 'UPDATE_ALERT', alert, message } } export const updateAlertCallback = (alert, message) => { return dispatch => { return dispatch(updateAlert(alert, message)).then(() => { console.log('Done!'); }); } }完成运行后记录某些内容的正确方法是什么？

Answer 1

function showAlert(message) {
  return {
    type: SHOW_ALERT, 
    message
  };
}

function hideAlert(message) {
  return {
    type: HIDE_ALERT,
  };
}

function flashAlert(message) {
  return (dispatch) => {
    dispatch(showAlert(message));
    setTimeout(() => {
      dispatch(hideAlert());
    }, 5000);
  }
}

你需要使用redux-thunk才能工作。然后，您可以this.props.flashAlert('Oh noes!!!!')使用正确的mapStateToProps。还需要还原剂和反应组分。

褪色在做出反应时并不是一件容易的事情。我建议你保存以供日后使用。

flashAlert函数的作用是返回一个带dispatch函数的函数。这个功能可以做各种有趣的事情，但还没有。首先，此函数将传递给redux的调度。这种调度通常会抛出，因为操作必须是普通对象。但是因为你正在使用redux-thunk它会很好。 Redux-thunk将调用此函数并从redux传递dispatch函数。现在函数将运行，最后。它首先要做的是通过调用showAlert()来调度它获得的动作。这次它是一个具有type属性的对象，这使得它成为一个合适的redux动作。据推测，redux会将这个动作传递给我们的减速器，它将用新消息更新状态，但我们不能确切地知道这是因为减速器为了简洁而被排除在这个答案之外。谁知道它包含的代码。在状态更改为以某种方式显示消息后，我们执行setTimeout()。当这回电时，我们使用我们之前使用的相同hideAlert()函数调用dispatch来调度我们获得的另一个操作。我们还有它。这可能会消除来自该州的信息。

Redux会告诉您在状态发生变化时重新呈现相应的组件。据推测，其中一个组件将根据具体情况显示或不显示消息。

Answer 2

使用redux-thunk，你可以让行动返回一个承诺：

export const updateAlert = (alert, message) => (dispatch, getState) => {  
  dispatch ({
    type: 'UPDATE_ALERT',
    alert,
    message
  });
  return Promise.resolve(getState());
  // or just Promise.resolve();

现在你可以调用updateAlert（xx，xx）.then（newState =＆gt; {.....}）;

Answer 3

Redux-thunk是你的答案。在您的商店代码更改

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
</script>
<div class="wrapper">
  <!-- Navigation -->
  <ul class="nav">
    <li>
      <a href="#tab-1">Tab-1</a>
    </li>
    <li>
      <a href="#tab-2">Tab-2</a>
    </li>
  </ul>
  <!-- Panel-1 -->
  <div id="tab-1" class="tabs active">
    <p>Tab-1 Content</p>
  </div>
  <!-- Panel-2 -->
  <div id="tab-2" class="tabs">
    <p>Tab-2 Content</p>
  </div>
</div>

到

cmd /C "asadmin --host localhost --port !port! undeploy appName"

你将可以使用你的redux动作。

请参阅https://github.com/gaearon/redux-thunk#installation

Answer 4

redux中的操作是普通对象。 Redux thunk允许返回函数而不是对象。这些函数由thunk中间件执行，最终到达商店进行调度的最终对象是普通对象。下面是redux thunked行动的一个例子。

export default class AccountActions {

  static login(username, password) {
    return (dispatch, getStore) => {
      dispatch(AccountActions.loginRequest(username));
      fetch(apiUrls.signInUrl, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          user: {
            email: username,
            password: password,
          }
        })
      })
      .then(response => {
        return response.json().then(responseJson => {
          return dispatch(AccountActions.loginResponse(username, responseJson.token, response.status));
        });
      })
      .catch(err => {
        console.error(err);
      });
    };
  }

  static loginRequest(username) {
    return {
      type: ActionTypes.loginRequest,
      username,
    };
  }

  static loginResponse(username, token, status) {
    return {
      type: ActionTypes.loginResponse,
      username,
      token,
      status,
    };
  }

}

调度动作后Redux Thunk Callback？

4 个答案: