Redux-thunk dispatch не работает

Question

Я смотрю на thunk и пытаюсь выяснить, как реализовать вызов 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 и передать ее на ваш вызов connect, чтобы иметь возможность отправить addUser().

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

затем

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

Теперь вы можете назвать его как опору.

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

Answer 2

Вы на самом деле не отправляете thunk. Вы называете это напрямую. Вам необходимо передать внутреннюю функцию () => {} thunk на dispatch.

Существует несколько способов справиться с этим. Поскольку вы не предоставляете аргумент mapDispatchToProps для connect, то компонент App будет автоматически присваиваться this.props.dispatch(). Итак, в App.addUser() вы можете сделать this.props.dispatch(addUser()).

Другим способом было бы предварительно связать создателя действий 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.