从服务文件发送的数据未在 Reducer 状态中更新

Question

我遇到了一个奇怪的问题。问题是我正在尝试进行 API 命中（在服务文件中），这又提供了一些数据（它正在工作），这些数据将在我的 reducer1.js 中更新，然后返回。现在，我的问题是虽然该值进入了 reducer 文件，但没有返回，因此状态没有改变，而我的最终组件也没有重新渲染。

现在，当我的服务文件成功命中并将数据返回到我的 reducer1.js 时，为什么“GET_List”操作类型没有返回更新状态？有人能看出有什么问题吗？

index.js（服务文件）

const global = {
  getActressList: async function(){
    const response = await fetch("http://localhost:2000/api/actressList");
    const data = await response.json();
    return data;
  }
}

export default global;

reducer1.js

import global from '../../services/index';

const initialState = {
  data: [
    {
      id: 1, 
      name: "Aishwarya Rai",
      src: "/assets/img/aishwarya.png"
    }
  ]
};

function reducer1(state = initialState, action) {

  switch (action.type) {

    case "GET_LIST": {
      const data = global.getActressList();
      data.then((res)=> {
        return {
          ...state,
          data: res
        }
      })
    }
    default:
      return state;
  }
}

export default reducer1;

结果：

Answer 1

您正在从 promise 返回，而不是从 reducer 函数返回：

function reducer1(state = initialState, action) {
  switch (action.type) {
    case "GET_LIST": {
      const data = global.getActressList();
      data.then((res) => {
        // here you are returning from a promise not from a reducer function
        return {
          ...state,
          data: res,
        };
      });
    }
    default:
      return state;
  }
}

reducer 中的代码应该像这样同步：

function reducer1(state = initialState, action) {
  switch (action.type) {
    case "GET_LIST": {
      return {
        ...state,
        data: action.payload,
      };
    }
    default:
      return state;
  }
}

你的数据获取应该像这样移动到组件效果：

function YourComponent() {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data)

  useEffect(() => {
    const data = global.getActressList();
    data.then((res) => {
      dispatch({type: 'GET_LIST', payload: res});
    });
  }, [])

  ...
}

编辑

如果您使用 class 组件，则应将提取逻辑放在 componentDidMount 生命周期挂钩中，如下所示：

class YourComponent extends Component {
  state = { data: [] };

  componentDidMount() {
    const data = global.getActressList();
    data.then((res) => {
      dispatchYourAction({type: 'GET_LIST', payload: res});
    });
  }

  ...
}

从服务文件发送的数据未在 Reducer 状态中更新

Data sent from service-file is not updated in Reducer State

javascript

async-await

reactjs

es6-promise