本教程深入探討redux中reducer返回值的關(guān)鍵性。當(dāng)reducer錯(cuò)誤地返回狀態(tài)的子部分而非完整的狀態(tài)對(duì)象時(shí)，會(huì)導(dǎo)致訂閱者方法中訪(fǎng)問(wèn)特定屬性（如`data.posts`）時(shí)出現(xiàn)`undefined`。文章將詳細(xì)解釋這一問(wèn)題的原因，并提供正確的reducer實(shí)現(xiàn)方式，強(qiáng)調(diào)維護(hù)狀態(tài)結(jié)構(gòu)不變性的重要性，確保redux應(yīng)用的數(shù)據(jù)流穩(wěn)定可靠。

在Redux應(yīng)用中，狀態(tài)管理的核心在于Reducer函數(shù)。Reducer是一個(gè)純函數(shù)，它接收當(dāng)前狀態(tài)（state）和一個(gè)動(dòng)作（action），并返回一個(gè)新的狀態(tài)。Redux的“單一狀態(tài)樹(shù)”原則意味著整個(gè)應(yīng)用的狀態(tài)都存儲(chǔ)在一個(gè)JavaScript對(duì)象中。因此，Reducer返回的任何值都將成為這個(gè)全局狀態(tài)樹(shù)的根。理解并嚴(yán)格遵守Reducer返回值的結(jié)構(gòu)是構(gòu)建穩(wěn)定Redux應(yīng)用的關(guān)鍵。

Redux狀態(tài)管理基礎(chǔ)

Redux的核心思想之一是狀態(tài)的不可變性。這意味著Reducer不應(yīng)該直接修改現(xiàn)有狀態(tài)，而是應(yīng)該返回一個(gè)新的狀態(tài)對(duì)象。此外，Reducer的返回值必須始終是一個(gè)完整的狀態(tài)對(duì)象，其結(jié)構(gòu)應(yīng)與應(yīng)用預(yù)期的全局狀態(tài)結(jié)構(gòu)保持一致。

考慮以下初始狀態(tài)結(jié)構(gòu)：

const initialState = {
  posts: [
    { id: 1, title: "Post one" },
    { id: 2, title: "Post two" },
  ],
};

這個(gè)initialState定義了一個(gè)包含posts數(shù)組的頂層對(duì)象。在Redux中，store.getState()方法將始終返回這個(gè)完整的對(duì)象。

問(wèn)題分析：data.posts 為 undefined 的根源

當(dāng)我們?cè)赗edux應(yīng)用中遇到store.subscribe回調(diào)函數(shù)中訪(fǎng)問(wèn)data.posts時(shí)返回undefined的情況，通常是因?yàn)镽educer在處理某個(gè)特定動(dòng)作時(shí)，改變了全局狀態(tài)的預(yù)期結(jié)構(gòu)。

讓我們看一個(gè)有問(wèn)題的Reducer實(shí)現(xiàn)片段：

const PostsReducer = (state = initialState, action) => {
  switch (action.type) {
    // ... 其他正確的action處理 ...

    case "get_all_posts":
      return state.posts; // <-- 問(wèn)題所在：直接返回了數(shù)組，而非完整的狀態(tài)對(duì)象

    default:
      return state;
  }
};

在這個(gè)PostsReducer中，當(dāng)action.type為"get_all_posts"時(shí)，Reducer錯(cuò)誤地返回了state.posts數(shù)組本身，而不是一個(gè)包含posts屬性的完整狀態(tài)對(duì)象。

當(dāng)store.dispatch(GetAllPosts())被調(diào)用后，如果Reducer執(zhí)行了case "get_all_posts"分支，那么全局狀態(tài)的形狀將從{ posts: [...] }變?yōu)閇...]（一個(gè)數(shù)組）。

隨后，當(dāng)store.subscribe回調(diào)函數(shù)被觸發(fā)時(shí)：

AI建筑知識(shí)問(wèn)答

用人工智能ChatGPT幫你解答所有建筑問(wèn)題

22

查看詳情

store.subscribe(() => {
  const data = store.getState(); // 此時(shí) data 實(shí)際上是一個(gè)數(shù)組，例如：[{ id: 1, title: "Post one" }, ...]
  console.log(data.posts); // 嘗試訪(fǎng)問(wèn)數(shù)組的 .posts 屬性，結(jié)果自然是 undefined
});

由于data現(xiàn)在是一個(gè)數(shù)組，它沒(méi)有名為posts的屬性，因此data.posts會(huì)返回undefined。

解決方案：維護(hù)狀態(tài)結(jié)構(gòu)不變性

解決這個(gè)問(wèn)題的關(guān)鍵在于確保Reducer的任何分支都返回一個(gè)符合預(yù)期全局狀態(tài)結(jié)構(gòu)的對(duì)象。即使某個(gè)動(dòng)作的目的是“獲取所有文章”，Reducer也應(yīng)該返回一個(gè)包含posts屬性的完整狀態(tài)對(duì)象。

以下是修正后的PostsReducer：

const initialState = {
  posts: [
    { id: 1, title: "Post one" },
    { id: 2, title: "Post two" },
  ],
};

const PostsReducer = (state = initialState, action) => {
  switch (action.type) {
    case "add_post":
      return {
        ...state,
        posts: [...state.posts, action.payload],
      };

    case "delete_post":
      return {
        ...state,
        posts: state.posts.filter((post) => post.id !== action.payload),
      };

    case "get_all_posts":
      // 修正：返回一個(gè)完整的狀態(tài)對(duì)象，確保包含 posts 屬性
      // 這里使用 ...initialState 是為了確保 state 結(jié)構(gòu)回到初始定義，
      // 如果 action 只是為了確保 posts 屬性存在，也可以返回 { ...state, posts: state.posts }
      return { ...initialState }; 

    default:
      return state;
  }
};

通過(guò)將get_all_posts動(dòng)作的處理邏輯修改為return { ...initialState };，我們確保了Reducer總是返回一個(gè)包含posts屬性的頂層對(duì)象。這樣，無(wú)論哪個(gè)動(dòng)作被分發(fā)，全局狀態(tài)的結(jié)構(gòu)都將保持一致，store.getState().posts將始終可以訪(fǎng)問(wèn)到posts數(shù)組。

完整代碼示例

為了更好地理解，我們提供完整的代碼示例：

const { createStore } = require("redux");

// 1. 定義初始狀態(tài)
const initialState = {
  posts: [
    { id: 1, title: "Post one" },
    { id: 2, title: "Post two" },
  ],
};

// 2. 定義 Reducer
const PostsReducer = (state = initialState, action) => {
  switch (action.type) {
    case "add_post":
      return {
        ...state,
        posts: [...state.posts, action.payload],
      };

    case "delete_post":
      return {
        ...state,
        posts: state.posts.filter((post) => post.id !== action.payload),
      };

    case "get_all_posts":
      // 修正后的邏輯：返回一個(gè)完整的狀態(tài)對(duì)象
      return { ...initialState }; 

    default:
      return state;
  }
};

// 3. 創(chuàng)建 Redux Store
const store = createStore(PostsReducer);

// 4. 定義 Action Creators
const GetAllPosts = () => {
  return {
    type: "get_all_posts",
  };
};

const AddPost = (payload) => {
  return { type: "add_post", payload };
};

const removePost = (payload) => {
  return { type: "delete_post", payload };
};

// 5. 訂閱 Store 變化
store.subscribe(() => {
  const data = store.getState();
  console.log("Current State:", data);
  console.log("data.posts:", data.posts);
});

// 6. 分發(fā) Action 進(jìn)行測(cè)試
console.log("--- Initial Dispatch (GetAllPosts) ---");
store.dispatch(GetAllPosts()); 
// 此時(shí) data.posts 將正確輸出數(shù)組

console.log("\n--- Dispatch AddPost ---");
store.dispatch(AddPost({ id: 3, title: "Post three" }));

console.log("\n--- Dispatch RemovePost ---");
store.dispatch(removePost(1));

console.log("\n--- Final State ---");
console.log(store.getState());

運(yùn)行上述代碼，您會(huì)發(fā)現(xiàn)data.posts將始終正確地輸出posts數(shù)組，不再出現(xiàn)undefined。

注意事項(xiàng)與最佳實(shí)踐

1. Reducer必須是純函數(shù)： 它們不應(yīng)有副作用，并且對(duì)于相同的輸入，必須始終產(chǎn)生相同的輸出。
2. 狀態(tài)不可變性： 永遠(yuǎn)不要直接修改原始狀態(tài)對(duì)象。始終返回一個(gè)新的狀態(tài)對(duì)象，并通過(guò)擴(kuò)展運(yùn)算符（...）復(fù)制舊狀態(tài)和更新的屬性。
3. 維護(hù)狀態(tài)結(jié)構(gòu)： 這是本文的核心。Reducer返回的結(jié)構(gòu)必須與預(yù)期的全局狀態(tài)結(jié)構(gòu)保持一致。如果全局狀態(tài)是一個(gè)包含posts屬性的對(duì)象，那么Reducer的任何分支都應(yīng)該返回一個(gè)包含posts屬性的對(duì)象。
4. 明確動(dòng)作意圖： get_all_posts這個(gè)動(dòng)作類(lèi)型在很多情況下可能被誤解。如果其意圖是異步獲取數(shù)據(jù)，那么通常需要使用Redux Thunk或Redux Saga等中間件來(lái)處理副作用，并在數(shù)據(jù)加載成功后分發(fā)一個(gè)GET_ALL_POSTS_SUCCESS之類(lèi)的動(dòng)作，由Reducer來(lái)更新?tīng)顟B(tài)。如果此動(dòng)作只是為了確保posts屬性的存在或重置為初始值，那么當(dāng)前方案是有效的。

總結(jié)

在Redux中，Reducer的返回值至關(guān)重要。它不僅決定了應(yīng)用的新?tīng)顟B(tài)，也定義了新?tīng)顟B(tài)的結(jié)構(gòu)。當(dāng)Reducer錯(cuò)誤地返回狀態(tài)的子部分（例如一個(gè)數(shù)組而非包含該數(shù)組的對(duì)象）時(shí)，會(huì)導(dǎo)致全局狀態(tài)的結(jié)構(gòu)被破壞，進(jìn)而使得在訂閱者或組件中嘗試訪(fǎng)問(wèn)特定屬性時(shí)得到undefined。通過(guò)始終確保Reducer返回一個(gè)完整的、符合預(yù)期結(jié)構(gòu)的狀態(tài)對(duì)象，我們可以有效避免這類(lèi)問(wèn)題，確保Redux應(yīng)用的數(shù)據(jù)流穩(wěn)定和可預(yù)測(cè)。

以上就是Redux Reducer狀態(tài)不變性：解決undefined屬性訪(fǎng)問(wèn)問(wèn)題的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！