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

我的目标是创建四个屏幕来收集用户数据，然后将这些数据发送到Firebase。当我遍历多个屏幕时，redux似乎是实现此目的的最佳方法。我的设置如下：用户拍照，因此我得到了下载URL，然后保存了redux存储，然后为该图片添加了标题并将该标题发送到redux存储。然后针对第二个图像和标题重复此操作。我不断收到与未定义对象有关的错误，并在不应该调用的地方调用钩子。这是我的代码：

减速器：

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类中。我感觉这是我的问题的一部分，但不知道如何解决。感谢您的任何帮助。

最佳答案

在减速器中，您尝试访问action.firstImageUrl，action.secondImageUrl，action.action.firstImageTitle和action.secondImageTitle，而在操作中将其称为url和title。

代替使用action.firstImageUrl和action.secondImageUrl使用action.url，代替action.firstImageTitle和action.secondImageTitle使用action.title。

您必须确保使用在动作分派器中命名属性的相同方法来命名属性。