如何使用 redux saga 從 redux 商店獲取項目：已解決

Question

編輯：最后的解決方案

所以我從 API 獲取數據並將其存儲到我的 Redux 存儲中。 它是一個對象數組，包含 100 個對象。 在前端，我顯示每個對象的 4 個鍵。

我現在要做的是在前端，按鍵（名稱或年份）搜索並呈現結果。 理想情況下，它會像 PSQL 中的 ILIKE 一樣，但即使只有在 e.target.value === obj.super.nested.key||obj.super.nested.key_two 時才有結果也會很棒。

我嘗試使用 redux-saga/effects 中的 select() 無濟於事。

我最初嘗試的是在輸入字段的 onChange 上，以 e.target.value 作為參數將動作分派給觀察者，該觀察者將使用該值作為 select() 的參數調用函數。

使用 PSQL 而不是 redux saga 的代碼將是：

    const [val, setVal] = useState("");
---------------------------------------------
    useEffect(() => {
        if (val.length >= 3) {
            axios.get(`/searchCards/${val}.json`).then(results => {});
        } else if (val.length <= 3) {
            setCard("");
        }
    }, [val]);
---------------------------------------------
 function handleChange(e) {
    e.preventDefault();
    setVal(e.target.value);
  }

----------------------------------------------
   <form noValidate onSubmit={e => this.submit(e)}>
            <input
              noValidate
              name="searchValue"
              placeholder="name"
              onChange={e => handleChange(e)}
            />
            <br />
            <br />
            <input onChange={e => handleChange(e)} type="date" />
          </form>

---

節點.js

app.get("/searchCards/:str.json", (req, res) => {
    db.findCard(req.params.str)
        .then(results => {
            let result = results.rows[0].name;
            res.json({ result });
        })
        .catch(err => {
            console.log("error in searching for cards by name: ", err.message);
            res.json(null);
        });
});

exports.findCard = function findCard(str) {
    return db.query(`SELECT * FROM cards WHERE name ILIKE $1 LIMIT 1`, [
        str + "%"
    ]);
};

---

我怎么能用 redux-saga 實現同樣的效果，按值搜索存儲，並返回包含該值的整個對象？

---

解決方案

如果有人想知道，我已經找到了我的解決方法。 redux-saga 的文檔不是很豐富，所以我用我知道的唯一方法來做了。

基本上，當組件掛載時，我從 api 請求數據並存儲在 redux 存儲中。 只要它在商店里，我就會在 FE 上渲染它。

由於在更改輸入字段時，我只想顯示先前顯示數據的某些部分，因此我創建了一個三元組，表示輸入字段值是否存在/更改，通過存儲映射並返回輸入 value.toLowerCase() 的位置。 startsWithstartsWith(value_in_the_store)，否則返回所有數據。

它就像一個魅力。

如果有人有其他想法，我很樂意聽到。

Answer 1

解決方案

如果有人想知道，我已經找到了我的解決方法。 redux-saga 的文檔不是很豐富，所以我用我知道的唯一方法來做了。

基本上，當組件掛載時，我從 api 請求數據並存儲在 redux 存儲中。 只要它在商店里，我就會在 FE 上渲染它。

由於在更改輸入字段時，我只想顯示先前顯示數據的某些部分，因此我創建了一個三元組，表示輸入字段值是否存在/更改，通過存儲映射並返回輸入 value.toLowerCase() 的位置。 startsWithstartsWith(value_in_the_store)，否則返回所有數據。

它就像一個魅力。

如果有人有其他想法，我很樂意聽到。