在使用 react、redux(thunk) 的某些组件中使用全局状态和局部状态答案

【问题标题】：using global state and local state in some components using react, redux(thunk)在使用 react、redux(thunk) 的某些组件中使用全局状态和局部状态
【发布时间】：2019-05-05 20:50:53
【问题描述】：

我正在开发一个包含多个组件的应用程序。组件A：将它们之间的对象关系的节点显示为边。我通过调用全局状态/存储中的 Component As componentDidMount() 函数中的函数，使用（基于 redux-thunk）从 api 加载数据。此外，我必须仅基于存储在数据中的对象的某些字段来创建节点。

组件 B：我的意图是，如果单击一个节点，则将另一个组件（节点的详细视图）添加到组件 B。对于这个“详细视图”，我需要对象的其他（附加）字段。

到目前为止，我的问题是我还需要组件 A 的本地状态。原因是我还必须添加不应传播到全局状态/存储的临时节点。

所以我的问题是：你能给我一个建议，我应该在组件 A 和组件 B 中只选择对象的必要字段吗？

如何处理组件B中需要全局状态和局部状态的情况？

【问题讨论】：

考虑提供一个可行的示例来解释这些组件之间的关系。问题将有更好的机会以这种方式得到解决。 Redux 有本地状态的用例，但不清楚为什么这里不能选择全局状态。

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

一种解决方案是创建一个商店并订阅对该商店的更改的更改。

接下来的代码使用redux的例子。

// ./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>
}

【讨论】：