ایجاد حالت سراسری در ری اکت با قلاب و بدون context — از صفر تا صد

1let globalState = {
2  count: 0,
3  text: 'hello',
4};

1const useGlobalState = () => {
2  return globalState;
3};

1const listeners = new Set();
2const useGlobalState = () => {
3  const [state, setState] = useState(globalState);
4  useEffect(() => {
5    const listener = () => {
6      setState(globalState);
7    };
8    listeners.add(listener);
9    listener(); // in case it's already changed
10    return () => listeners.delete(listener); // cleanup
11  }, []);
12  return state;
13};

1const setGlobalState = (nextGlobalState) => {
2  globalState = nextGlobalState;
3  listeners.forEach(listener => listener());
4};

1const useGlobalState = () => {
2  const [state, setState] = useState(globalState);
3  useEffect(() => {
4    // ...
5  }, []);
6  return [state, setGlobalState];
7};

1const createContainer = (initialState) => {
2  let globalState = initialState;
3  const listeners = new Set();
4  const setGlobalState = (nextGlobalState) => {
5    globalState = nextGlobalState;
6    listeners.forEach(listener => listener());
7  };
8  const useGlobalState = () => {
9    const [state, setState] = useState(globalState);
10    useEffect(() => {
11      const listener = () => {
12        setState(globalState);
13      };
14      listeners.add(listener);
15      listener(); // in case it's already changed
16      return () => listeners.delete(listener); // cleanup
17    }, []);
18    return [state, setGlobalState];
19  };
20  return {
21    setGlobalState,
22    useGlobalState,
23  };
24};

1const createContainer = (initialState) => {
2  let globalState = initialState;
3  const listeners = Object.fromEntries(Object.keys(initialState).map(key => [key, new Set()]));
4  const setGlobalState = (key, nextValue) => {
5    globalState = { ...globalState, [key]: nextValue };
6    listeners[key].forEach(listener => listener());
7  };
8  const useGlobalState = (key) => {
9    const [state, setState] = useState(globalState[key]);
10    useEffect(() => {
11      const listener = () => {
12        setState(globalState[key]);
13      };
14      listeners[key].add(listener);
15      listener(); // in case it's already changed
16      return () => listeners[key].delete(listener); // cleanup
17    }, []);
18    return [state, (nextValue) => setGlobalState(key, nextValue)];
19  };
20  return {
21    setGlobalState,
22    useGlobalState,
23  };
24};

1// ...
2  const setGlobalState = (key, nextValue) => {
3    if (typeof nextValue === 'function') {
4      globalState = { ...globalState, [key]: nextValue(globalState[key]) };
5    } else {
6      globalState = { ...globalState, [key]: nextValue };
7    }
8    listeners[key].forEach(listener => listener());
9  };
10  // ...

1const createContainer = (reducer, initialState) => {
2  let globalState = initialState;
3  const listeners = Object.fromEntries(Object.keys(initialState).map(key => [key, new Set()]));
4  const dispatch = (action) => {
5    const prevState = globalState;
6    globalState = reducer(globalState, action);
7    Object.keys((key) => {
8      if (prevState[key] !== globalState[key]) {
9        listeners[key].forEach(listener => listener());
10      }
11    });
12  };
13  // ...
14  return {
15    useGlobalState,
16    dispatch,
17  };
18};

1const useGlobalStateProvider = () => {
2    const [state, dispatch] = useReducer(patchedReducer, globalState);
3    useEffect(() => {
4      linkedDispatch = dispatch;
5      // ...
6    }, []);
7    const prevState = useRef(state);
8    Object.keys((key) => {
9      if (prevState.current[key] !== state[key]) {
10        // we need to pass the next value to listener
11        listeners[key].forEach(listener => listener(state[key]));
12      }
13    });
14    prevState.current = state;
15    useEffect(() => {
16      globalState = state;
17    }, [state]);
18  };