如何在 React Native 中使用 Redux 跨多個屏幕存儲多個值

Question

我的目標是創建四個屏幕，從用戶那里收集數據，然后將該數據發送到 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類中。 我覺得這是我的問題的一部分，但不知道如何解決。 感謝您的任何幫助。

Answer 1

在您的減速器中，您嘗試訪問action.firstImageUrl 、 action.secondImageUrl 、 action.action.firstImageTitle和action.secondImageTitle而在您的操作中它被稱為url和title 。

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

您必須確保以與您在動作調度程序中命名的方式相同的方式命名屬性。