react-native - React Native：等到动作完成并且reducers设置状态

Question

我是新来的反应本机并使用 redux 进行状态管理的新手。我的组件不会等到减速器设置状态并返回初始状态。这导致没有数据的空对象。

这是我的组件

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 函数，但我不知道为什么它不起作用。谢谢。

标签： react-nativereact-reduxreact-native-ios

Answer 1

您同时使用 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,
          });
        });
    };