如何在商店中設置初始狀態

Question

所以我試圖從應用商店獲取狀態，並將其傳遞到我的組件中進行渲染，我遇到的一個這樣的問題是它似乎不知道我嘗試使用的特定狀態的初始狀態，例如，如果狀態已經加載（動作已經分派並從 API 返回數據）然后這工作正常，但是在動作尚未分派的新加載上似乎狀態未定義，我嘗試了一些不同的事情最初設置狀態但它似乎不起作用，無論我做什么，狀態似乎在新加載時都未定義。 在我的商店里，我有這個：

const votdFromStorage = localStorage.getItem("votd")
  ? JSON.parse(localStorage.getItem("votd"))
  : { votd: { bible: "", verse: [], passage: "", chapter: "" } };

const initialState = {
  // verse of the day
  votd: votdFromStorage,
};

這表示要查看它們是否在 localStorage 中已經存在一個項目，如果它確實返回它，否則返回一個具有一些初始值的對象，我得到的具體錯誤是它無法讀取未定義的bible 。 我在我的家庭組件中收到這個錯誤

  const dispatch = useDispatch();
  const {
    votd: { bible, passage, verse, chapter },
    loading,
  } = useSelector((state) => state.votd);

  useEffect(() => {
    dispatch({ type: VOTD_REQUEST });
    dispatch(verseOfTheDay());
  }, [dispatch]);

在這里，我使用useSelector鈎子從狀態中獲取votd對象。 其中，它找不到bible ，我假設它也無法找到其他值，但bible是第一位的。 無論如何，我相信問題在於我如何設置 votd 對象的initial state ，我什至嘗試在reducer類似於您在商店中看到的init狀態，但它仍然返回相同的錯誤。

這是減速器：

export const votdReducer = (state = {}, action) => {
  switch (action.type) {
    case VOTD_REQUEST:
      return { ...state, loading: true };
    case VOTD_SUCCESS:
      return { loading: false, votd: action.payload };
    case VOTD_FAIL:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

在這里也有幫助的是設置到store的初始狀態

const initialState = {
  // verse of the day
  votd: votdFromStorage,
};

Answer 1

我認為您需要像我所做的那樣將初始投票放在初始減速器中，您可以得到這個想法。 它只會解決未定義的問題。

const votdFromStorage = localStorage.getItem("votd")
  ? JSON.parse(localStorage.getItem("votd"))
  : {};    

const initialState = {
      // verse of the day
     votd: { bible: "", verse: [], passage: "", chapter: "" }
    }; 
  
    initialState.votd= {...initialState.votd,...votdFromStorage?.votd};

         export const votdReducer = (state = initialState , action) => {
          switch (action.type) {
            case VOTD_REQUEST:
              return { ...state, loading: true };
            case VOTD_SUCCESS:
              return { loading: false, votd: action.payload };
            case VOTD_FAIL:
              return { ...state, loading: false, error: action.payload };
            default:
              return state;
          }
        };

已編輯...