React Native：等待操作完成，然后减速器设置状态

Question

我是新来的响应本机并使用redux进行状态管理的人。我的组件没有等到reducer设置状态并返回初始状态。导致没有数据的空对象。

这是我的组件

function SingleProject({ route, getSingleProject, data: { singleProject } }) {
  useEffect(() => {
     getSingleProject(route.params.itemId);
  }, [getSingleProject, route.params.itemId]);

  return (
    <Container>
      <Text>{singleProject && singleProject.data.name}</Text>
 </Container>
  );
}

SingleProject.propTypes = {
  getSingleProject: PropTypes.func.isRequired,
};

const mapStateToProp = (state) => ({
  data: state.project,
});

export default connect(mapStateToProp, { getSingleProject })(SingleProject);

这是我的动作

export const getSingleProject = (id) => async (dispatch) => {
  const config = {
    headers: {
      Authorization: await AsyncStorage.getItem("token"),
    },
  };
  await axios
    .get(`${API_URL}/project/single/${id}`, config)
    .then((res) => {
      dispatch({
        type: GET_SINGLE_PROJECT,
        payload: res.data,
      });
    })
    .catch((err) => {
      dispatch({
        type: GET_SINGLE_PROJECT_ERROR,
        payload: err,
      });
    });
};

这是我的减速机

const initiaState = {
  data: null,
  singleProject: {},
  loading: true,
  error: "",
};

export default function (state = initiaState, actions) {
  const { type, payload } = actions;

  switch (type) {
 case GET_SINGLE_PROJECT:
      return {
        ...state,
        singleProject: payload,
        loading: false,
      };

 default:
      return state;
  }
}

所以基本上我希望我的组件等待状态更新。我已经使用了mapStateToprop函数，但是我不知道为什么它不起作用。谢谢。

Answer 1

考虑到Redux Thunk是一个不错的选择...或更高级的Redux Saga。

在下面的链接中都有关于如何使用它们的两个示例：

Redux Thunk

Redux Saga

Answer 2

您同时使用async / await和Promise（.then）。这可能是问题所在。尝试删除异步/等待。

export const getSingleProject = (id) => (dispatch) => {
      const config = {
        headers: {
          Authorization: await AsyncStorage.getItem("token"),
        },
      };
      axios
        .get(`${API_URL}/project/single/${id}`, config)
        .then((res) => {
          dispatch({
            type: GET_SINGLE_PROJECT,
            payload: res.data,
          });
        })
        .catch((err) => {
          dispatch({
            type: GET_SINGLE_PROJECT_ERROR,
            payload: err,
          });
        });
    };