学习 Redux Thunk。如何触发动作答案

【问题标题】：Learning Redux Thunk. How to trigger action学习 Redux Thunk。如何触发动作
【发布时间】：2021-02-16 18:47:01
【问题描述】：

我正在学习 Thunk，但我不确定自己做错了什么。下面我有两个动作创建者。第一个返回一个对象，第二个返回一个函数（“Thunk”）。

当doThing 动作创建者被调用时，我预计会经过一秒钟并且名为pingApiAction 的动作创建者会被调用。就目前而言，这不会发生。

我做错了什么？

export const pingApiAction = function(){
    console.log("ping")
    return {type:"PING"}
}



export function doThing() {
    console.log("works")
  return (dispatch) => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(pingApiAction());
    }, 1000);
  };
}

【问题讨论】：

那么发生了什么？您在控制台中看到works 吗？你能告诉我们你在哪里/如何调用doThing的函数调用吗？

标签： javascript reactjs redux-thunk

【解决方案1】：

据我所知，您的问题在于您的减速器，而不是您的动作或动作创建者。

因此，如果您希望更正自己的代码，您可以粘贴您的减速器或直接使用我在下面为您编写的代码：

//action creator
 const pingApiAction = function(){
    console.log("ping")
    return {type:"PING"}
}


//action creator
function doThing() {
    console.log("works")
  return (dispatch) => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(pingApiAction());
    }, 1000);
  };
}

 
//reducer
const reducer =(state={ping:""},action)=>{
  
  switch(action.type){
    case "PING":
      return{...state,ping:"It works"}
        
        default:
        return state;
  }
}

const store = Redux.createStore(reducer);
console.log(store.getState());

store.dispatch({ type: 'PING' });
console.log(store.getState());

【讨论】：