wie Ajax in Reaktion mit `Redux-Thunk` anrufen?

Question

Ich Anruf Ajax versuche in reagieren mit redux-thunk und axios .Ich Daten aus JSON-Datei

einfache Art und Weise (wie dies auf den Knopf klicken Anruf) erhalten möchten

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

Aber ich möchte verwenden, redux-thunk. Mit anderen Worten muss ich abonnieren in der Komponente, die Versand sein wird mit thunk

können wir thunk hier ?? hier ist mein Code 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

Es gibt ein gutes Tutorial ist dies auf egghead.io über ... Sie könnte es zu überprüfen. https://egghead.io/lessons/javascript-redux-dispatching-actions-asynchronously-with-thunks

Answer 2

I axios als Beispiel hier für den Aufruf von api verwendet haben, können Sie fetch oder superagent also.You kann so etwas wie versuchen verwenden.

AXIOS

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

So war das für den API-Aufruf, jetzt in den Zustand kommen. In redux gibt es einen Staat, der deine App handhabt. Ich würde vorschlagen, dass Sie redox Grundlagen gehen sollten, die Sie here finden können. Sobald Ihr API-Aufruf erfolgreich ist, müssen Sie Ihren Status mit den Daten aktualisieren.

Aktionsdaten zu holen

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} 
    } 
    } 

Aktion Zustand

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

Reducer

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

zu aktualisieren