如何减小 React-redux 代码的大小？

Question

How i can reduce count of useSelector , in my code, when I want to connect a few objects from my store?

user     = useSelector(store => store.user.user, shallowEqual),
todos    = useSelector(store => store.todos.todos, shallowEqual),
id       = useSelector(store => store.todos.id, shallowEqual),
title    = useSelector(store => store.todos.title, shallowEqual),
deadline = useSelector(store => store.todos.deadline, shallowEqual),
status   = useSelector(store => store.todos.status, shallowEqual),
isOpen   = useSelector(store => store.todos.showPopUp, shallowEqual);

If it's not too painful for you, write me some good books to read about react, redux, or react-redux together.
Thanks!

Answer 1

You can compose selector functions, and write custom hooks.

So in above scenario, you can do:

// selectors.js (selectors shared across files)

const selectUser = store => store.user.user;
const selectTodos = store => store.todos.todos;

// Now in your component: 

const [user, todos, ...] = useSelector(store => [
    selectUser,
    selectStore, 
    ...
].map(f => f(store)), shallowCompareArrayMembers);

// (Feel free to alternatively use object destructuring either).

// Where shallowCompareArrayMembers is a custom comparator to lift shallowEqual over an array:

const shallowCompareArrayMembers = (prev, next) => {
    if (prev.length !== next.length) {
        throw new Error('Expected array lengths to be same');
    }
    for (let i = 0; i < prev.length; i++) {
        if (!shallowEqual(prev[i], next[i])) return false;
    }
    return true;
}

Alternatively, if you find yourself combining same set of selector again and again in multiple components, extract out the whole thing in a custom hook:

const useTodoDetailsSelection = () => ({
    user: useSelector(store => store.user.user, shallowEqual),
    todos: useSelector(store => store.todos.todos, shallowEqual),
    ...
})

Now use that hook in component:

const MyComponent = () => {
    const {user, todos, ...} = useTodoDetailsSelection();
    // Render components
}