ReduxでのAxiosの動作が "可"ではない

Question

私はReact with Reduxのセットアップを完全に行っています。私のアクションファイルでは、私はaxiosを使ってサードパーティのAPIを呼び出します。

フォームコンポーネントをReduxストアに接続してPOSTアクションを呼び出すと、私は定義されていないときに呼び出すことができないというエラーが表示されます...面白いのは、アクションがまだフォームこのコンソールエラーがスローされた直後に第三者のapiに提出されます。 私は数多くのS/O質問だけでなく、ax32 & redux-thunkドキュメントを見てきましたが、私は何が欠けているのか分かりません。ここでは、関連するコードの一部です：

は、私は、エラーが何かを持っているかもしれないと考えて

import axios from 'axios'; 
import _ from 'lodash' 
import runtimeEnv from '@mars/heroku-js-runtime-env'; 
import {apiErrorCatcher} from "../../../utils/errorCatcher" 
import {toastr} from 'react-redux-toastr' 

const env = runtimeEnv(); 

export function createProfile(data) { 
    return dispatch => { 
     axios.post(env.REACT_APP_API_URL + '/api/profile/', data).then( 
      (res) => { 
       toastr.success('Profile added', 'Congratulations on adding your profile') 
       return res 
      } 
     ) 
     .catch(function (error) { 
      apiErrorCatcher(error) 
      toastr.error('Oops...', 'Unfortunately an error occurred on our side. Please try again later.') 
      return error 
     }) 
    } 
} 

Profile.js

... 

handleCreateProfile=()=>{ 
    this.props.actions.createProfile(this.state.data).then( 
    (res) => {console.log(res)} 
) 
} 

... 

function mapDispatchToProps(dispatch) { 
    return { actions: bindActionCreators({createProfile}, dispatch) } 
} 


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Profile)) 

index.js

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

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

をactions.js私は100％自信がありません。また、私はどこに間違っているのか分からないので、これを解決する方法もわかりません。

Answer 1

問題は、コンポーネントのメソッドである：

アクションbecouse

this.props.actions.createProfile(this.state.data).then( 
    (res) => {console.log(res)} 
) 

は約束を返さないので、あなたがあなたのデータを記録したい、またはディスパッチアクション場合は、アクションcreateProfileでそれを行う必要があります。