我的重新选择功能怎么了？我没有输出

Question

我想使用重新选择。我想通过ID来获得购物车。

Reselect.ts

import { createSelector } from "reselect";
import { RootState } from "../store";

export const shoppingCarts = (state: RootState) => state.ShoppingCart;

export const getCartById = (state: any, id: string) => createSelector(
  shoppingCarts,
  state => state.find(cart => cart.product?.id === id)
);

index.tsx

  const { product_id } = props;
  const shoppingCart = useSelector(state => getCartById(state, product_id));

  console.log(shoppingCart);

控制台日志输出

[Function memoized]

如何获得函数的输出（或JSON值）？

如果我这样做

shoppingCart()

，那我就知道

undefined is not an object (evaluating 'state.ShoppingCart')

Answer 1

因为getCartbyId是选择器出厂功能，而不是选择器。这就是为什么您获得[函数记忆] log时 incode> use exelector 时。

看看Doc 如何创建一个参数的选择器？。

提供提取参数并将其转发到输出选择器的输入选择器进行计算

例如

const selectItemsByCategory = createSelector(
  [
    // Usual first input - extract value from `state`
    state => state.items,
    // Take the second arg, `category`, and forward to the output selector
    (state, category) => category
  ],
  // Output selector gets (`items, category)` as args
  (items, category) => items.filter(item => item.category === category)
)

因此，应该是：

import { createSelector } from 'reselect';

export const shoppingCarts = (state) => state.carts;

export const getCartById = createSelector([shoppingCarts, (_, productId: string) => productId], (carts, productId) =>
  carts.find((cart) => cart.product?.id === productId),
);

测试

import { render } from '@testing-library/react';
import { renderHook } from '@testing-library/react-hooks';
import React from 'react';
import { Provider, useSelector } from 'react-redux';
import { combineReducers, createStore } from 'redux';
import { getCartById } from '.';

describe('72135522', () => {
  test('should pass', () => {
    const product_id = '1';
    function TestComp() {
      const cart = useSelector((state) => getCartById(state, product_id));
      console.log(cart);
      return null;
    }
    const rootReducer = combineReducers({
      carts: (state = [{ product: { id: '1' } }, { product: { id: '2' } }]) => state,
    });
    const store = createStore(rootReducer);
    render(
      <Provider store={store}>
        <TestComp />
      </Provider>,
    );
  });
});

日志：

 console.log
    { product: { id: '1' } }