带有 redux 的全局状态以某种方式切换变量答案

【问题标题】：Global state with redux somehow switches variables带有 redux 的全局状态以某种方式切换变量
【发布时间】：2021-10-19 22:20:36
【问题描述】：

我很困惑为什么会发生这种情况，因为在我使用 redux 之前从未发生过这种情况。我正在构建一个反应本机应用程序，目前当我尝试控制台日志 store.getStore() 获得以下输出。

Object {
  "userState": Object {
    "currentUser": Object {
      "email": "test120@gmail.com",
      "username": "test13",
    },
    "listings": Array [],
  },
}

现在，当我调度我的 fetchUserListings() 操作时，它应该更新处于以下状态的列表。

Object {
  "userState": Object {
    "currentUser": Array [
      Object {
        "addressData": Object {
          "description": "2300 Yonge Street, Toronto, ON, Canada",
          "matched_substrings": Array [
            Object {
              "length": 3,
              "offset": 0,
            },
          ],
          "place_id": "ChIJx4IytjwzK4gRwIPk2mqEJow",
          "reference": "ChIJx4IytjwzK4gRwIPk2mqEJow",
          "structured_formatting": Object {
            "main_text": "2300 Yonge Street",
            "main_text_matched_substrings": Array [
              Object {
                "length": 3,
                "offset": 0,
              },
            ],
            "secondary_text": "Toronto, ON, Canada",
          },
          "terms": Array [
            Object {
              "offset": 0,
              "value": "2300",
            },
            Object {
              "offset": 5,
              "value": "Yonge Street",
            },
            Object {
              "offset": 19,
              "value": "Toronto",
            },
            Object {
              "offset": 28,
              "value": "ON",
            },
            Object {
              "offset": 32,
              "value": "Canada",
            },
          ],
          "types": Array [
            "street_address",
            "geocode",
          ],
        },
        "addressDescription": "2300 Yonge Street, Toronto, ON, Canada",
        "bath": "6",
        "benefits": Array [
          "Large Beds",
          "Nearby Bustop",
          "In-building gym",
        ],
        "urls": Array [
          "https://firebasestorage.googleapis.com/v0/b/studenthousingfinder-11f55.appspot.com/o/listing%2FoHr0OMukEFguYxJborrvMAJQmre2%2F0.bd7cwka5gj?alt=media&token=81b3e06a-65a9-44a7-a32d-d328014058e7",
          "https://firebasestorage.googleapis.com/v0/b/studenthousingfinder-11f55.appspot.com/o/listing%2FoHr0OMukEFguYxJborrvMAJQmre2%2F0.k78etqzypk?alt=media&token=e2622547-00f4-447b-8bea-799758734f0d",
        ],
      },
    ],
    "listings": Array [],
  },
}

基本上，API 调用正在工作并且状态已更新，但不知何故，发回的数据正在更新状态中的 currentUser 而不是列表。

这是我当前的 reducer 代码：

import {USER_LISTINGS_STATE_CHANGE, USER_STATE_CHANGE} from '../constants';

const initialState = {
  currentUser: null,
  listings: [],
};

export const userReducer = (state = state || initialState, action) => {
  switch (action.type) {
    case USER_STATE_CHANGE:
      return {
        listings: state.listings,
        currentUser: action.payload,
      };
    case USER_LISTINGS_STATE_CHANGE:
      return {
        currentUser: state.currentUser,
        listings: action.payload,
      };
    default:
      return state;
  }
};

这是我用来发出 API 请求的 2 个函数

export function fetchUser() {
  return async (dispatch) => {
    db.collection('users')
      .doc(auth.currentUser.uid)
      .get()
      .then((snapshot) => {
        if (snapshot.exists) {
          console.log('Yo');
          dispatch({type: USER_STATE_CHANGE, payload: snapshot.data()});
        } else {
          console.log('Does not exist');
        }
      });
  };
}

export function fetchUserListings() {
  return async (dispatch) => {
    db.collection('posts')
      .doc(auth.currentUser.uid)
      .collection('userListings')
      .orderBy('title', 'desc')
      .get()
      .then((snapshot) => {
        let listingArr = snapshot.docs.map((doc) => {
          const data = doc.data();
          const id = doc.id;
          return {id, ...data};
        });
        dispatch({
          type: USER_LISTINGS_STATE_CHANGE,
          payload: listingArr,
        });
      });
  };
}

任何帮助将不胜感激，因为我真的不知道为什么会发生这种情况！

【问题讨论】：

在 reducer 中的开关上方添加 console.log(action) 并检查两种情况下收到的有效负载
@KathirpandianK 做到了。不知何故，类型是 USER_STATE_CHANGE 并且有效负载是正确的有效负载，它解释了变量中的切换，但我不知道为什么调度了不正确的类型
检查您的constants 文件。也许值指向相同的调度文本。
天哪，就是这样，我不敢相信我犯了这么愚蠢的错误，非常感谢！
好像你发现了你的问题，投票关闭为“不可重现或由错字引起”。干杯，祝你好运。

标签： reactjs react-native redux use-state

【解决方案1】：

您在数据库中的users 集合似乎输入错误。

让我得出这个结论的事实是，在您的 fetchUserListings() 函数中，您实际上是在向 json 对象添加一个额外的字段，即 id。

现在，console.log 输出不包含此 id 字段，这仅意味着 fetchUserListings() 不是此处调用的字段。

您可以尝试将一些 try catch 块和 console.log('fetchUser', snapshot.data()) 和 console.log('fetchUserListings', snapshot.docs) 放入各自的函数中，以查看正在调用哪个函数。

【讨论】：