如何在 React 中正確使用 redux-thunk？

Question

我試圖讓我的應用程序不要抱怨 action 沒有未定義的類型屬性。

我已經設置了我的客戶端渲染如下：

import React from 'react';
import ReactDOM from 'react-dom';
import routes from './shared/routes';
import rootReducer from './shared/reducers';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';

let initialState = window.__INITIAL_STATE_;

const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

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

我認為哪個是正確的方法？

Answer 1

是的。 在redux-thunk github 頁面中有一個很好的示例說明如何使用它。

對於您的操作，如果它是一個異步操作，我將使用這種方法來發送帶有承諾的異步操作：

行動：

export function add({name, time}) {
  return dispatch => {
    dispatch({type: ADD});
    return postJSON('/api/services', {
      name,
      time,
    })
    .then(service => {
      dispatch({
        type: ADD_SUCCESS,
        service: service,
      });
    })
    .catch(error => {
      dispatch({
        type: ADD_FAILURE,
        error,
      });
    });
  };
}

在我的組件中：

  addService () {
    const { dispatch } = this.props;
      return (fields) => {
        dispatch(add(fields));
        dispatch(toggleAddForm());
      };
  }