Как вызвать ajax в реакции с помощью `redux-thunk`?

Question

Я пытаюсь Ajax вызова в реакцию с помощью redux-thunk и axios .Я хочу, чтобы получить данные из файла JSON

простой способ (на щелчка кнопки вызова, как это)

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

Но я хочу использовать 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 как пример здесь для вызова APIs, вы можете использовать fetch или superagent also.You может попробовать что-то подобное.

AXIOS

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

Так что было для вызова API, сейчас подходит к государству. В редуксе есть одно состояние, которое обрабатывает ваше приложение. Я бы посоветовал вам ознакомиться с базовыми принципами, которые вы можете найти 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 
    } 
    } 

Reducer

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