在nextjs中的非反应组件中获取状态和更新状态

Question

我正在进行一个nextjs项目，在该项目中，我有一个与pages文件夹处于同一级别的helpers文件夹。

我在helpers文件夹中有一个ts文件，在这里我想获得最新状态和更新状态，取决于最新状态

这就是我获取状态的方式

store().getState()

从store.js 导入存储的位置

Im根据以前的状态更新状态

const state = store().getState()
if(!state.currentUser){   // here im checking if state has currentUser
store().dispatch(Action)  // here im calling action which will update the state
}
do further operations

这里的问题是，在更新状态之后，我没有从store().getState()获得更新的状态。我管理事情的方式正确吗？如何获取更新的状态？

*EDIT* : Im sending a helper function as a prop to many if my page components. Now that i dont want to touch this , i somehow want to get the updated state and dispatch actions based on the state itself. Note that the hepler function is not a functional component

提前感谢

Answer 1

问题是您使用的这个存储不是React的一部分，所以React不知道数据何时更改。你必须创建一种方法让React知道数据发生了变化，这样它就可以重新提交你的组件或触发一个操作。您的商店是否提供订阅更改的方式？如果是这样的话，你可以在你的组件中做这样的事情(假设你使用的是钩子(：

编辑：可重用挂钩方式：

export const useStore = () => {
const [storeState, setStoreState] = useState(store().getState());
useEffect(() => {
const subscribeFunc = (newState) => setStoreState(newState));
store().subscribe(subscribeFunc);
return () => {
store().unsubscribe(subscribeFunc);
}
}, [])
return [storeState, store().dispatch]
}

然后在组件中

const [storeState, dispatch] = useStore();
// listen to changes of the currentUser and fire actions accordingly
useEffect(() => {
if (!storeState.currentUser) {
dispatch(Action)
}
}, [storeState.currentUser])

初始方式：

// sync the store state with React state
const [storeState, setStoreState] = useState(store().getState());
useEffect(() => {
const subscribeFunc = (newState) => setStoreState(newState));
store().subscribe(subscribeFunc);
return () => {
store().unsubscribe(subscribeFunc);
}
}, [])
// listen to changes of the currentUser and fire actions accordingly
useEffect(() => {
if (!storeState.currentUser) {
store().dispatch(Action)
}
}, [storeState.currentUser])

通过在组件中设置更改状态，React现在知道数据发生了更改，并将相应地采取行动。

这是一种非常本地化的方法来解释这个概念，但显然最好创建一个可重复使用的钩子，用于任何商店的整个应用程序。