为了账号安全,请及时绑定邮箱和手机立即绑定

React redux useSelector 和参数

React redux useSelector 和参数

有只小跳蛙 2023-12-14 15:13:41
我试图理解为什么我似乎无法将参数传递给选择器。本质上:我有一个存储数字和布尔值的逻辑 - 该数字是我想要选择材料元素的参数 - 我有一个调度操作的按钮://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 slicematerialView:(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);}我试图通过单击按钮来显示“工作”的相关材料。我正在使用 createReducer 函数模式,但我对如何实现这一点有点迷失 - 是否有更干净的方法来使用带有属性的选择器?
查看完整描述

1 回答

?
慕无忌1623718

TA贡献1744条经验 获得超4个赞

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。


查看完整回答
反对 回复 2023-12-14
  • 1 回答
  • 0 关注
  • 117 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信