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

gzszwxb4  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(261)

我正在从事一个nextjs项目,在该项目中,我在pages文件夹中有一个helpers文件夹。
我在helpers文件夹中有一个ts文件,在这里我想根据最新状态获取最新状态和更新状态
这就是我获得国家的方式

store().getState()

从store.js导入store的位置
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 提前谢谢

c90pui9n

c90pui9n1#

问题是,您使用的这个存储不是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现在知道数据已更改,并将相应地采取行动。
这是一种非常局部的方法来解释这个概念,但显然最好创建一个可重用的钩子,以便在应用程序中为任何商店使用。

相关问题