Question

我有一个事件处理程序，可以处理状态更改，例如用户输入，还可以进行API /异步调用。我现在想使用redux来解决这个问题。

事件处理程序：

 alerta2(){
   alert("Bruno Leite")
 }


(click)="Plans();alerta2();"

我试图在reducer中做同样的事情：

  handleApiCall = (event) => {
    // const { arr, value } = this.state;
    if (event.keyCode === 13) {
      if (value && this.someobject) {
        const arrObj = {
          name: 'Name',
          message: this.state.value,
        };
        this.state.arr.push(arrObj);
        //makes api call
        this.someobject.send("/url/sub-url", {}, JSON.stringify(arrObj));
      }
    }
  }

现在这可以正常工作，我可以看到我的数组正在通过我的分派进行更新，无论何时更新值，组件中的操作都是如此。但是问题是在哪里进行此api调用：

const CALL_API = 'CALL_API';

const initialState = {
  value: '',
  arr: [],
}

export default function chatWidget(state = initialState, action) {
  switch (action.type) {
    case CALL_API:
    if(action.payload === 13) {
        return {
          ...state,
          arr: [...state.arr, {name: 'Name', message: state.value}],
          value: '',
        }
    }
  }
 default:
      return state;
}

Answer 1

您的reducer应该是纯函数（现在有副作用，如API调用）。

您实际上有2个选择：

1）使用thunk中间件。这是详细描述的here

2）如果要使用生成器，请使用redux-saga

这是使用Redux的基础知识，请仔细阅读。

如何在Redux / Reducer中进行Aysnc呼叫

1 个答案: