Redux-thunkディスパッチが動作しない

Question

私はサンクを見て、APIコールを実装する方法を理解しようとしています。それは機能していないので、私は非常に基本に戻りました。ボタンをクリックするとコンソールに'Getting here!と表示されますが、console.log(dispatch)のときは何も表示されません。私はここに何かを逃していますか

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore, applyMiddleware } from 'redux'; 
import { connect, Provider } from 'react-redux'; 
import thunk from 'redux-thunk' 
import axios from 'axis'; 

const store = createStore(
    reducer, 
    applyMiddleware(thunk) 
); 

function fetchUser() { 
    return axios.get('https://randomuser.me/api/'); 
} 

function addUser() { 
    console.log('Getting here'); 
    return (dispatch) => { 
     console.log(dispatch) //not showing anything 
     return fetchUser().then(function(data){ 
      console.log(data); 
     }); 
    }; 
} 

class App extends React.Component { 
    addUser() { 
     addUser(); 
    } 

    render() { 
     return (
      <button onClick={this.addUser.bind(this)}>+</button> 
     )  
    } 
} 

const mapPropsToState = function(store){ 
    return { 
     newState: store 
    } 
} 

var ConnectApp = connect(mapPropsToState)(App); 

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

Answer 1

コンポーネントから通常の機能としてaddUser()を呼び出すことはできません。あなたはmapDispatchToProps機能を使用して、addUser()を派遣できるようにするためにあなたのconnectコールにそれを渡す必要があります。

const mapDispatchToProps = dispatch => ({addUser:() => dispatch(addUser())}) 

その後、

ConnectApp = connect(mapPropsToState, mapDispatchToProps)(App); 

今、あなたは小道具としてそれを呼び出すことができます。

addUser() { 
     this.props.addUser(); 
    } 

Answer 2

あなたは実際にサンクを派遣していません。あなたはそれを直接呼びます。 dispatchに内部() => {}サンク機能を渡す必要があります。

これを処理するにはいくつかの方法があります。 mapDispatchToProps引数をconnectに指定していないため、Appコンポーネントには自動的にthis.props.dispatch()が与えられます。したがって、App.addUser()では、this.props.dispatch(addUser())とすることができます。

別の方法は、アクションクリエイターを事前バインドすることです。構文var ConnectApp = connect(mapPropsToState, {addUser})(App)でこれを行うことができます。その後、this.props.addUser()に電話すると、自動的に結果が送信されます。

http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/でアクションクリエイターとバインディングの使用に関する議論があり、https://gist.github.com/markerikson/6c7608eee5d2421966d3df5edbb8f05cとhttps://gist.github.com/markerikson/f46688603e3842af0f9720dea05b1a9eにバインディングとディスパッチのサンプルコードがあります。