About Redux toolkit

[uzzal46bd]

Hi,
I have a question about Redux toolkit.
In our team, we have a discussion about how we can create a selector function in Redux Toolkit together with Slice creation.
One of our Slice (approximately) looks like below:

import { createEntityAdapter, createSelector, createSlice } from `@reduxjs/toolkit`;
import { axiosInstance } from `../../../../edit-network/repositories/AxiosInstanceFactory`;
import { addAttributes } from `../attributesSlice`;
import { setPanelTitle } from `../../ui/panelSlice`;

// Adapter
const projectMembersAdapter = createEntityAdapter({
    selectId: projectMember => projectMember.name
});

const initialState = {
    ...projectMembersAdapter.getInitialState(),
    inProgress: false,
    selectedProjectMemberName: ``,
    error: { status: false, data: null }
};

// Slice
const projectMembersSlice = createSlice({
    name: `projectMembers`,
    initialState,
    reducers: {
        requestStarted: state => {
            projectMembersAdapter.removeAll(state);
            state.error = initialState.error;
            state.inProgress = true;
        },
        requestFailed: (state, action) => {
            state.inProgress = false;
            state.error = action.payload;
        },
        requestSucceeded: (state, action) => {
            state.inProgress = false;
            projectMembersAdapter.setAll(state, action.payload);
        },
        projectMemberNameSelected: (state, { payload }) => {
            state.selectedProjectMemberName = payload;
        }
    }
});
// Private Actions
const { requestStarted, requestFailed, requestSucceeded, projectMemberNameSelected } = projectMembersSlice.actions;



// Selectors
export const selectProjectMembers = state => state.entities.editNetwork.projectMembers;

const selectAllProjectMembers = createSelector(selectProjectMembers, state => state.entities);


export const setSelectedProjectMemberName = name => dispatch => {
    dispatch(projectMemberNameSelected(name));
};
export const { selectById } = projectMembersAdapter.getSelectors(selectProjectMembers);
export const selectProjectMemberById = (state, id) => selectById(state, id);

export const getSelectedProjectMemberName = state =>
    state.entities.editNetwork.projectMembers.selectedProjectMemberName;

export default projectMembersSlice.reducer;

One of our colleague-A adds a new selector function like below in the slice:
export const selectProjectMemberById = (state, id) => selectById(state, id);

Then he uses that in a react component like below:

const getSelectedProjectMember = useSelector(state => selectProjectMemberById(state, selectedProjectMemberName));

So, the question is:
Do you see any problem of creating a selector like the above way in the slice and then consuming it in the component like the above way?

One of the colleague (colleague-A) is augmenting that selectProjectMemberById actually is not a selector as it doesn't follow export type Selector<S, R> = (state: S) => R; structure. It follows type NewSelector<S, R> = (state: S, id: Any) => R; structure and therefore selectProjectMemberById is not actually a selector.

Other colleague (colleague-B) is augmenting that selectProjectMemberById is also a selector as Redux toolkit has also a selector which is selectById and it follows type NewSelector<S, R> = (state: S, id: Any) => R; structure.
Then colleague-A is augmenting that type structure type NewSelector<S, R> = (state: S, id: Any) => R; (selectById) is an entity selector but not an real selector and therefore it is not ok to say it a selector.

Colleague-A, is also saying that it is not good to use useSelector like the below way:
const getSelectedProjectMember = useSelector(state => selectById(state, selectedProjectMemberName));
It should be used like the below way:
useSelector(selectProjectMemberById(selectedProjectMemberName));

If it is not used this [[[[useSelector(selectProjectMemberById(selectedProjectMemberName));]]] way then one can write more logic like below: (Colleague-A is saying it is not good to write more logic inside the useSelector.)

useSelector(state=> {
const project=selectById(state, id);
return selectByProjectId(state, project.id);
});

Therefore, I am thinking to hear how community is thinking about this discussion. Any feedback will be greatly appreciated.

[phryneas]

One of our colleague-A adds a new selector function like below in the slice:
export const selectProjectMemberById = (state, id) => selectById(state, id);

He could just
export const selectProjectMemberById = selectById;

Then he uses that in a react component like below:

const getSelectedProjectMember = useSelector(state => selectById(state, selectedProjectMemberName));

which is an example straight from the Hooks documentation and as such perfectly fine

Then colleague-A is augmenting that type structure type NySelector<S, R> = (state: S, id: Any) => R; (selectById) is an entity selector but not an real selector and therefore it is not ok to say it a selector.

A selector selects from the store. Perfectly fine to call it that.

Colleague-A, is also saying that it is not good to use useSelector like the below way:
const getSelectedProjectMember = useSelector(state => selectById(state, selectedProjectMemberName));
It should be used like the below way:
useSelector(selectProjectMemberById(selectedProjectMemberName));

This is syntactic sugar that you can use but technically has no difference. Banana, banana, potato, potato. You decide what you prefer. There is no technical reason to prefer one over the other

If it is not used this useSelector(selectProjectMemberById(selectedProjectMemberName)); way then one can write more logic like below: (Colleague-A is saying it is not good to write more logic inside the useSelector.)

Logic in selectors is perfectly fine, the point of selectors is to be able to compute derived data

[uzzal46bd]

Thank you very much for your feedback.