如何使用`redux-thunk`在反應中調用ajax？

Question

我試圖調用AJAX使用redux-thunk和axios。我想

簡單的方法（上按一下按鈕調用這樣）

axios.get('data.json').then((data)=>{ 
     console.log(data); 
    }) 

從JSON文件數據的反應，但我想用redux-thunk。換句話說，我需要訂閱組件，這將使用thunk

發送使用我們可以在這裏使用thunk？ 這裏是我的代碼 https://plnkr.co/edit/bcGI7cHjWVtlaMBil3kj?p=preview

const thunk = ReduxThunk.default; 
const abc= (state={},action) => { 
    console.log('in redux', action.type) 
    switch(action.type){ 
    case 'GET_DATA': 
     return dispatch =>{ 
     return axios.get('data.json'); 
     }; 

     default : 
     return state; 
    } 
} 
const {createStore,bindActionCreators ,applyMiddleware } =Redux; 
const {Provider,connect} =ReactRedux; 

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

class First extends React.Component { 
    constructor (props){ 
    super(props); 

    } 

    getDate(){ 
    this.props.getData(); 
    // axios.get('data.json').then((data)=>{ 
    // console.log(data); 
    // }) 
    } 
    render(){ 
    return (
    <div> 
     <button onClick={this.getDate.bind(this)}>GET DATA</button> 

    </div> 
    ) 
    } 
} 

const actions = { 
    getData:() => { 
     return { 
      type: 'GET_DATA', 
     } 
    } 
}; 

const AppContainer = connect(
    function mapStateToProps(state) { 
     return { 
      digit: state 
     }; 
    }, 
    function mapDispatchToProps(dispatch) { 
     return bindActionCreators(actions, dispatch); 
    } 
)(First); 
ReactDOM.render(
    <Provider store={store}> 
    <AppContainer/> 
    </Provider> 
    ,document.getElementById('root')) 

Answer 1

有關於這個......你可能想看看egghead.io一個很好的教程。 https://egghead.io/lessons/javascript-redux-dispatching-actions-asynchronously-with-thunks

Answer 2

我已經使用axios爲例這裏調用的API，你可以使用fetch或superagent also.You可以嘗試類似。

AXIOS

axios.get('//url') 
    .then(function (response) { 
    //dispatch action 
    }) 
    .catch(function (error) { 
    // throw error 
    }); 

所以這是API調用，現在來的狀態。在REDX有一個國家處理你的應用程序。我建議你應該通過REDX基礎知識，你可以找到here。所以一旦你的api調用成功了，你需要用數據更新你的狀態。

行動來獲取數據

function fetchData(){ 
    return(dispatch,getState) =>{ //using redux-thunk here... do check it out 
     const url = '//you url' 
     fetch(url) 
     .then (response) => {dispatch(receiveData(response.data)} //data being your api response object/array 
     .catch(error) => {//throw error} 
    } 
    } 

動作來更新狀態

function receiveData(data) { 
     return{ 
     type: 'RECEIVE_DATA', 
     data 
    } 
    } 

減速器

function app(state = {},action) { 
     switch(action.types){ 
      case 'RECEIVE_DATA': 
       Object.assign({},...state,{ 
        action.data 
        } 
        }) 
      default: 
      return state 
     } 
    }