如何使用“redux-thunk”调用 ajax？

Posted 2023-02-22

【中文标题】如何使用“redux-thunk”调用 ajax？

【英文标题】：how to call ajax in react using `redux-thunk`?

【发布时间】：2017-05-11 23:14:26

【问题描述】：

我正在尝试使用 redux-thunk 和 axios 调用 ajax。我想从 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'))

【参考方案1】：

egghead.io 上有一个关于这个的很好的教程……你可能想看看。 https://egghead.io/lessons/javascript-redux-dispatching-actions-asynchronously-with-thunks

【参考方案2】：

我这里以axios为例调用api，你也可以使用fetch或superagent。你可以试试类似的。

AXIOS

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

这就是 API 调用，现在进入状态。在 redux 中，有一种状态可以处理您的应用程序。我建议您应该阅读可以找到 here 的 redux 基础知识。因此，一旦您的 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