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

gzszwxb4 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(259)

我正在从事一个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 提前谢谢

JavaScript reactjs redux react-redux next.js

来源：https://stackoverflow.com/questions/68318501/get-state-and-update-state-in-a-non-react-component-in-nextjs

1条答案

按热度按时间

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

赞(0）回复(0）举报 2021-09-23

我来回答

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

1条答案

相关问题

热门标签

最新问答