try-reselect [REDUX]

re.tsx

import React from "react";

import { createSelector, createSelectorCreator, lruMemoize, weakMapMemoize } from 'reselect'
import { shallowEqual } from 'react-redux'
import fastDeepEqual from 'fast-deep-equal'

const createSelector2 = createSelectorCreator(
  lruMemoize,
  // fastDeepEqual
  {
    equalityCheck: fastDeepEqual
  },
)


const state1 = function () {
  console.log('state1', arguments);

  return ['state1']
}

const state2 = function () {
  console.log('state2', arguments);

  return 'state2'
}

const state3 = function () {
  console.log('state3', arguments);

  return ['state3']
}

const state4 = function () {
  console.log('state4', arguments);

  return 'state4'
}

const f = createSelector(
  [
    state1,
    state2,
    state3,
  ],
  // state1,
  // state2,
  // state3,
  // state4,
  function () {
    console.log('arguments', arguments);
    // return [...arguments].join('|')
    return arguments
  },
  {
    memoize: lruMemoize,
    // memoizeOptions: {
    //   max: 1,
    // },
    argsMemoize: lruMemoize,
    argsMemoizeOptions: {
      // resultEqualityCheck: fastDeepEqual,
      equalityCheck: fastDeepEqual
    }
  }

  // (a, b, c) => {
  //   return a + b + c
  // }
)


const Chid = () => {
  console.log('Chid render');
  React.useEffect(() => {
    console.log('Chid mounted', f(
      ['a', 'b', 'c'],
      ['x', 'y', 'z'],
    ));
  });

  return <div>Chid</div>
}


const App = () => {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('App mounted', f(
      { a: 11, b: 22, c: 33 },
      { A: 111, B: 222, C: 333 },
      { x: 1, y: 2, z: 3 },
      { X: 11, Y: 22, Z: 33 }
    ));

    console.log('App mounted', f.recomputations());



  });

  return (
    <>
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <code hidden>src/Re.tsx</code>
      {/* <Chid /> */}
    </>
  );
}

export default App;

redux.tsx

import React from "react";
import fastDeepEqual from 'fast-deep-equal';

const ExpensiveComponent = () => {
  const now = performance.now();
  while (performance.now() - now < 1000) {
    // do nothing
  }
  return <span>ExpensiveComponent</span>
}

const List = ({ len = 10 }) => {
  return (
    <ul>
      {Array.from({ length: len }).map((_, i) => <li key={i}><ExpensiveComponent /></li>)}
    </ul>
  )
}

const MList = React.memo(List);

const Counter = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

const Color = () => {
  const [color, setColor] = React.useState('red');

  return (
    <div>
      <MList len={5} />
      <h3 style={{ color }}>{color}</h3>
      <input value={color} type="color" onChange={e => setColor(e.target.value)} />
    </div>
  )
}



// redux
import { createStore } from 'redux';
import { Provider, useSelector, shallowEqual } from 'react-redux';

const store = createStore((state = {
  count: 0,
  user: {
    name: '',
    age: 12,
    // 宠物
    pet: ['dog', 'cat']
  },
}, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'UPDATE_USER':
      return { ...state, user: { ...state.user, ...action.payload } };
    case 'UPDATE_PET':
      return { ...state, user: { ...state.user, pet: action.payload } };
    default:
      return state;
  }
});

const User = () => {
  console.log('User render');
  const user = useSelector(state => state.user, fastDeepEqual);

  return (
    <div>
      <span>User</span>
      <code>
        {JSON.stringify(user, null, 2)}
      </code>
    </div>
  )
}

const ReduxUser = () => {
  console.log('ReduxUser render');
  const count = useSelector(state => state.count);
  return (
    <div>
      <span>ReduxUser</span>
      <h3>{count}</h3>
    </div>
  )
}
const ReduxCounter = () => {

  return (
    <div>
      <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>+1</button>
      <button
        onClick={() => {
          store.dispatch({
            type: 'UPDATE_USER',
            payload: {
              age: 18
            }
          })
        }}
      >
        update user
      </button>
      <button
        onClick={() => {
          store.dispatch({
            type: 'UPDATE_PET',
            payload: ['fish']
          })
        }
        }
      >
        add pet
      </button>
    </div>
  )
}

const App = () => {
  const slogan = `魔法师正在进行最后的仪式，为您带来一项惊艳功能`;

  // const {
  //   count: store
  // } = useSelector(state => state)

  // console.log('App', store);

  return (
    <>
      <h3>{slogan}</h3>
      <code hidden>src/App.tsx</code>
      {/* <List len={5} /> */}
      <Counter />
      {/* <Color /> */}
      <ReduxUser />
      <ReduxCounter />
      <User />
    </>
  );
}

export default function ExportApp() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  )
};

zustand.tsx

import { create } from 'zustand'

import { createSlice, withSlices } from 'zustand-slices'


const petSlice = createSlice({
  name: 'pet',
  value: [] as string[],
  actions: {
    add: (key: string) => (prev) => [...prev, key],
    remove: (key: string) => (prev) => prev.filter(k => k !== key),
  },
});

const useStore = create(withSlices(petSlice));

const Footer = () => {
  const add = useStore(s => s.add)
  const remove = useStore(s => s.remove)

  return (
    <div>
      <button onClick={() => add('key1')}>add key1</button>
      <button onClick={() => remove('key1')}>remove key1</button>
    </div>
  )
}

const App = () => {
  const pet = useStore(s => s.pet);

  return (
    <div>
      <h3>App</h3>
      <ul>
        {
          pet.map((p, i) => (
            <li key={i}>{p}</li>
          ))
        }
      </ul>
      <Footer />
    </div>
  )
}

export default App