【outdated】关于 useSelector 的一些学习

Copycopy code to clipboard
1// store/selector.js
2
3export const dataSelector = (state)=>{
4  return {
5    data: // ... 假装这里有很复杂的逻辑
6  }
7}
8
9// page/index.js
10
11const mapStateToProps = (state)=>{
12  return dataSelector(state)
13}
14// ... 然后connect

Copycopy code to clipboard
1import { createSelector } from "reselect";
2
3const selectorA = (state) => state.account.username;
4const selectorB = (state) => state.account.info;
5
6const selectSomeData = createSelector(
7  // 不一定要数组哈，也可以分开传
8  [selectorA, selectorB],
9  (username, info) => ({ ...username, infoDeatil: info[username.info] })
10);
11
12// 一个copy的例子
13const getVisibilityFilter = (state) => state.visibilityFilter;
14const getTodos = (state) => state.todos;
15
16export const getVisibleTodos = createSelector(
17  [getVisibilityFilter, getTodos],
18  (visibilityFilter, todos) => {
19    switch (visibilityFilter) {
20      case "SHOW_ALL":
21        return todos;
22      case "SHOW_COMPLETED":
23        return todos.filter((t) => t.completed);
24      case "SHOW_ACTIVE":
25        return todos.filter((t) => !t.completed);
26    }
27  }
28);

Copycopy code to clipboard
1// 这里的getIn是Immutable.Js的，和这个api无关哈。
2const data: IRank = useSelector((state: IGlobalState) => ({
3  rankList: state.getIn(["rank", "rankList"]),
4  loading: state.getIn(["rank", "loading"]),
5}));
6
7const { rankList, loading } = data;

Copycopy code to clipboard
1import { createSelector } from "reselect";
2import { useSelector } from "react-redux";
3
4const selectUserDisplay = createSelector(
5  (state) => state.currentUser,
6  (state) => state.entities.jobs,
7  (user, jobs) => ({ ...user, job: jobs[user.job] })
8);
9
10// 在组件里
11const user = useSelector(selectUserDisplay);

Copycopy code to clipboard
1import { useCallback } from "react";
2import { createSelector } from "reselect";
3import { useSelector } from "react-redux";
4
5// 下面全部在组件里
6const { id } = props;
7const selectUserDisplay = useCallback(
8  createSelector(
9    (state) => state.users,
10    (state) => state.entities.jobs,
11    (users, jobs) => {
12      const { job, ...user } = users[id];
13      return { ...user, job: jobs[job] };
14    }
15  ),
16  [id]
17);
18const user = useSelector(selectUserDisplay);

Copycopy code to clipboard
1import { useMemo } from "react";
2import { useSelector } from "react-redux";
3
4// 组件里
5const { id } = props;
6const users = useSelector((s) => s.entities.users);
7const jobs = useSelector((s) => s.entities.jobs);
8const userDisplay = useMemo(() => {
9  const { job, ...user } = users[id];
10  return { ...user, job: jobs[job] };
11}, [id, users, jobs]);

Copycopy code to clipboard
1import React from "react";
2import { useDispatch } from "react-redux";
3
4export const CounterComponent = ({ value }) => {
5  const dispatch = useDispatch();
6
7  return (
8    <div>
9      <span>{value}</span>
10      <button onClick={() => dispatch({ type: "increment-counter" })}>
11        Increment counter
12      </button>
13    </div>
14  );
15};

Copycopy code to clipboard
1const hasOwn = Object.prototype.hasOwnProperty;
2
3// 实际上是Object.is()方法的补全
4function is(x, y) {
5  if (x === y) {
6    // 处理+0===-0 true
7    return x !== 0 || y !== 0 || 1 / x === 1 / y;
8  } else {
9    // 处理NaN===NaN false
10    return x !== x && y !== y;
11  }
12}
13
14export default function shallowEqual(objA, objB) {
15  // 对基本数据类型比较
16  // 过滤掉均为基本类型的情况
17  if (is(objA, objB)) return true;
18
19  // 过滤掉这两种情况
20  // 只有一方是对象
21  // 有null
22  if (
23    typeof objA !== "object" ||
24    objA === null ||
25    typeof objB !== "object" ||
26    objB === null
27  ) {
28    return false;
29  }
30
31  const keysA = Object.keys(objA);
32  const keysB = Object.keys(objB);
33
34  if (keysA.length !== keysB.length) return false;
35
36  for (let i = 0; i < keysA.length; i++) {
37    if (!hasOwn.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
38      return false;
39    }
40  }
41
42  return true;
43}