Блог

Я пытаюсь понять, почему я не могу передать параметр в селектор.

По сути: у меня есть логика, которая хранит число и bool — число — это параметр, по которому я хочу выбрать элемент материала — У меня есть кнопка, которая отправляет действие:

 //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);
}

 

Я пытаюсь получить связанный материал «задания», который будет отображаться одним нажатием кнопки.
Я использую шаблон функции createReducer, и я немного не понимаю, как этого добиться — есть ли более чистый способ использования селектора со свойством?

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 доступным.