javascript - 如何在 React Native 中使用 Redux 跨多个屏幕存储多个值

Question

我的目标是创建四个屏幕来收集用户的数据，然后将该数据发送到 Firebase。当我遍历多个屏幕时，redux 似乎是执行此操作的最佳方法。我的设置如下:用户拍摄一张照片，因此我获取下载网址，然后将其保存到 redux 商店，然后他们为该图片添加标题，并将该标题发送到 redux 商店。然后对第二个图像和标题重复此操作。我不断收到与 undefined object 相关的错误，并在不应该调用的地方调用 Hook 。这是我的代码:

reducer :

import {
  ADD_FIRST_IMAGE_URL,
  ADD_SECOND_IMAGE_URL,
  ADD_FIRST_IMAGE_TITLE,
  ADD_SECOND_IMAGE_TITLE
} from "../actions/posts";

const initialState = {
  firstImageUrl: "",
  secondImageUrl: "",
  firstImageTitle: "",
  secondImageTitle: ""
};

const postReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_FIRST_IMAGE_URL:
      return { ...state, firstImageUrl: action.firstUrl };
    case ADD_SECOND_IMAGE_URL:
      return { ...state, secondImageUrl: action.secondUrl };
    case ADD_FIRST_IMAGE_TITLE:
      return { ...state, firstImageTitle: action.firstTitle };
    case ADD_SECOND_IMAGE_TITLE:
      return { ...state, secondImageTitle: action.secondTitle };
    default:
      return state;
  }
};

export default postReducer;

行动:

export const ADD_FIRST_IMAGE_URL = "ADD_FIRST_IMAGE_URL";
export const ADD_FIRST_IMAGE_TITLE = "ADD_FIRST_IMAGE_TITLE";
export const ADD_SECOND_IMAGE_URL = "ADD_SECOND_IMAGE_URL";
export const ADD_SECOND_IMAGE_TITLE = "ADD_SECOND_IMAGE_TITLE";

//Function?
export const addFirstImageUrl = urlString => {
  return { type: ADD_FIRST_IMAGE_URL, firstUrl: urlString };
};

export const addSecondImageUrl = urlString => {
  return { type: ADD_SECOND_IMAGE_URL, secondUrl: urlString };
};

export const addFirstImageTitle = titleString => {
  return { type: ADD_FIRST_IMAGE_TITLE, firstTitle: titleString };
};

export const addSecondImageTitle = titleString => {
  return { type: ADD_SECOND_IMAGE_TITLE, secondTitle: titleString };
};

首次上传:

uploadImage = async uri => {
    const response = await fetch(uri);
    const blob = await response.blob();
    var ref = firebase
      .storage()
      .ref()
      .child(new Date().toString());
    const snapshot = await ref.put(blob)
    const url = await snapshot.ref.getDownloadURL();
    useDispatch(addFirstImageUrl(url));
    console.log("Run")//This is not running
  };

最后一段代码位于我的 FirstCameraScreen 类中。我感觉这是我的问题的一部分，但不知道如何解决。感谢您的帮助。

Answer 1

在您的reducer中，您尝试访问action.firstImageUrl、action.secondImageUrl、action.action.firstImageTitle和 action.secondImageTitle 而在您的操作中，它称为 url 和 title。

不要使用action.firstImageUrl和action.secondImageUrl，而是使用action.url而不是action.firstImageTitle > 和 action.secondImageTitle 使用 action.title。

您必须确保以与操作调度程序中命名属性相同的方式命名属性。