использование глобального состояния и локального состояния в некоторых компонентах с использованиемact, redux (thunk) - PullRequest
Новая
       5

использование глобального состояния и локального состояния в некоторых компонентах с использованиемact, redux (thunk)

0 голосов
/ 04 декабря 2018

Я работаю над приложением, которое имеет несколько компонентов.Компонент A: отображает узлы отношений объектов между ними в виде ребер.Я загружаю данные из API, используя (на основе redux-thunk), вызывая функцию в функции Component As componentDidMount () в глобальном состоянии / хранилище.Кроме того, мне нужно создать узлы, основанные только на некоторых полях объектов, хранящихся в данных.

Компонент B: я намерен сделать так, чтобы при щелчке по узлу в компонент добавлялся другой компонент (подробное представление узла).Б. Для этого «подробного просмотра» мне нужны другие (дополнительные) поля объектов.

Моя проблема до сих пор заключается в том, что мне также нужно локальное состояние компонента А.Причина в том, что мне также нужно добавить временные узлы, которые не следует распространять в глобальное состояние / хранилище.

Итак, мои вопросы: Можете ли вы дать мне совет, где я должен выбрать только необходимые поля Объекта в Компоненте A и Компоненте B?

Как я могу справиться с ситуацией, когда янужно глобальное состояние и локальное состояние в компоненте B?

1 Ответ

0 голосов
/ 26 марта 2019

Решением является создание магазина и подписка на изменения в этом магазине.

следующий код использует пример с приставкой. 

// ./globalState.js
import { useEffect, useState } from 'react'; 
import { createStore } from 'redux';

const store = createStore(function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
});

export const useGlogalStore = () => {
  const [state, setState] = useState();

  useEffect(() => {
    return store.subscribe(() => setState(store.getState()));
  }, [store]);

  return [state, store.dispatch];
}

тогда в вашем приложении используйте только useGlogalStore() для чтения состояния.

Пример. 

import { useGlogalStore } from './globalState.js';

export const App = () => {
  const [state, dispatch] = useGlogalStore();
  return <div>
    Count: {state}

    <button onClick={() => dispatch({ type: 'INCREMENT' })}>Up</button>
    <button onClick={() => dispatch({ type: 'DECREMENT' })}>Down</button>
  </div>
}
...