Блог

Я нашел отличный рабочий реагирующий хук для управления глобальным состоянием моего приложения. Но пример был написан на Javascript, а я работаю на TypeScript, поэтому типы должны быть заданы неявно.

Это мой store.ts:

 import { useState, useEffect } from 'react';

let globalState = {};
let listeners = [];
let actions = {};

export const useStore = (shouldListen = true) => {
  const setState = useState(globalState)[1];

  const dispatch = (actionIdentifier, payload) => {
    const newState = actions[actionIdentifier](globalState, payload);
    globalState = { ...globalState, ...newState };

    for (const listener of listeners) {
      listener(globalState);
    }
  };

  useEffect(() => {
    if (shouldListen) {
      listeners.push(setState);
    }

    return () => {
      if (shouldListen) {
        listeners = listeners.filter((li) => li !== setState);
      }
    };
  }, [setState, shouldListen]);

  return [globalState, dispatch];
};

export const initStore = (userActions, initialState) => {
  if (initialState) {
    globalState = { ...globalState, ...initialState };
  }
  actions = { ...actions, ...userActions };
};
 

Это positions_store.ts, управляющий обновлением координат элемента (для начала):

 import { initStore } from './store';

interface GlobalState {
  position: { x: number; y: number };
}

const configureStore = () => {
  const actions = {
    TOGGLE_FAV: (position: { x: number; y: number }) => {
      return { position: { x: position.x, y: position.y } };
    },
  };
  initStore(actions, {
    position: { x: 0, y: 0 },
  });
};
 

Typescript выдает мне ошибку для listeners , actionIdentifier , payload , userActions и initialState для неявности, имеющей «любой» тип.

Я борюсь уже несколько часов и ничего не добиваюсь… Любая помощь приветствуется!

На самом деле, типы сильно зависят от того, как вы разрабатываете структуру данных, это пример listeners типа:

 let listeners: ((state: typeof globalState) => void)[] = [];