我是否正确理解了 next-redux-wrapper 的行为?
Did I correctly understand the behaviour of next-redux-wrapper?
试图用 next-redux-wrapper 制作计数器,redux,Next.js。
我看到当我点击几个计数器按钮,然后移动到其他页面并返回计数器页面时,getServerSideProps
再次将计数器初始化为 3。我理解这个库,因为它有助于将 SSR 期间的调度结果合并到客户端 redux 存储,但不会将客户端存储状态同步到服务器 redux 存储。
我理解的对吗?
这是我的计数器应用代码
index.tsx
export const getServerSideProps = wrapper.getServerSideProps(
(store) => async () => {
store.dispatch(add(3));
return {
props: {},
};
}
);
const index = (props: any) => {
const count = useSelector((state: AppState) => state.counter.count);
const dispatch = useDispatch();
return (
<>
<Link href='/book'>// move to other page then come back
<a>move</a>
</Link>
<div>{count}</div>
<button onClick={() => dispatch(add(1))}>+</button>
<button onClick={() => dispatch(deleter(2))}>-</button>
</>
);
};
它将帮助您在客户端上从服务器中提取数据,但是由于 SSG 呈现的数据可能是在请求前几天创建的,甚至 SSR 也不知道客户端上发生了什么,所以没有办法从客户端到服务器同步数据。
试图用 next-redux-wrapper 制作计数器,redux,Next.js。
我看到当我点击几个计数器按钮,然后移动到其他页面并返回计数器页面时,getServerSideProps
再次将计数器初始化为 3。我理解这个库,因为它有助于将 SSR 期间的调度结果合并到客户端 redux 存储,但不会将客户端存储状态同步到服务器 redux 存储。
我理解的对吗?
这是我的计数器应用代码
index.tsx
export const getServerSideProps = wrapper.getServerSideProps(
(store) => async () => {
store.dispatch(add(3));
return {
props: {},
};
}
);
const index = (props: any) => {
const count = useSelector((state: AppState) => state.counter.count);
const dispatch = useDispatch();
return (
<>
<Link href='/book'>// move to other page then come back
<a>move</a>
</Link>
<div>{count}</div>
<button onClick={() => dispatch(add(1))}>+</button>
<button onClick={() => dispatch(deleter(2))}>-</button>
</>
);
};
它将帮助您在客户端上从服务器中提取数据,但是由于 SSG 呈现的数据可能是在请求前几天创建的,甚至 SSR 也不知道客户端上发生了什么,所以没有办法从客户端到服务器同步数据。