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

Question

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

B部分：我的意图是，如果单击一个节点，则会将另一个组件(节点的详细视图(添加到组件B中。对于这个"详细视图"，我需要对象的其他(附加(字段。

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

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

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

Answer 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];
}

则在您的应用程序中仅使用CCD_ 1来读取状态。

示例。

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