React redux useSelector 和参数

Question

我想了解为什么我似乎无法将参数传递给 selector.

本质上：我有一个存储数字和布尔值的逻辑 - 数字是我想要 select 一个 material 元素的参数 - 我有一个调度动作的按钮:

//on a jobcard - dispatches to the material logic slice, pushing the number into the redux state: materialforJobNumber;
 <button className="materialViewer"  onClick={() =>{dispatch(materialView(data.jobsessionkey))}}> MATERIAL</button>

哪个调度到逻辑片：

//logic slice
materialView:(state, action)=>{
    console.log("what");
    console.log("material view succesfully called", action);
    const newState = {...state};
    console.log(newState);
    newState.materialforJobNumber = action.payload;
    newState.showMaterial=true;
    return newState
},

//the component that handles displaying the list of material for a job;

import {selectAttachedByJobKey} from "../MaterialCard/MaterialSlice";
const store= useStore();
const foundJN = store.getState().logic.materialforJobNumber;
const selectedJob=store.getState().jobs.find(x=>x.jobsessionkey==foundJN);
const materials = useSelector(selectAttachedByJobKey(foundJN));
const materialCards = materials.filter(x=>x.AttachedJobKey==foundJN).map((x,i)=><MaterialCard props={x} key ={i} />)

//material slice:
import { createSlice } from '@reduxjs/toolkit';

export const selectAttachedByJobKey = (state,action) =>{
    console.log("selecting material by job key",action);
    console.log(action?.payload);
    console.log(state);
    return state.material.filter(x=>x.AttachedJobkey===action?.payload);
}

我正在尝试让 'job' 的相关 material 在单击按钮时显示。我正在使用 createReducer 函数模式，我对如何实现这一点有点迷茫——有没有更简洁的方法来使用 select 或属性?

Answer 1

useSelector 接受一个只有 state 作为参数的函数。如果你想传递其他变量，你可以使用柯里化方法：

export const selectAttachedByJobKey = (action) => (state) =>{
    console.log("selecting material by job key",action);
    console.log(action?.payload);
    console.log(state);
    return state.material.filter(x=>x.AttachedJobkey===action?.payload);
}

现在，当您执行 const materials = useSelector(selectAttachedByJobKey(foundJN)); 时，您将传递给 useSelector 一个具有 foundJN 可用的函数。

React redux useSelector 和参数

React redux useSelector and parameters

javascript

reactjs

redux

redux-reducers