在redux中路由时如何将redux存储发送到客户端

Question

所以我是nextjs的新手，我无法在路由后在新构建的页面上保持调度状态。请问我们如何保持状态。

基本上我有一个侧边栏，我试图保持活动按钮的状态。我尝试使用 getInitialProps 获取 url 查询并使用 useEffect 发送加载操作，但 redux 存储仍然是空的。

使用效果

useEffect(() => {
        var index;
        if (product_id === 'lime') index = 0
        if(product_id === 'travetine') index = 1
        // console.log(entry, index)
        entryClickButton({           // the action I am trying to dispatch however its not happening 
            type: entry,
            newEntries: entry === 'new-entries' ? index : undefined,
            soldEntries: entry === 'sold-entries' ? index : undefined
        })
    }, []);

Answer 1

您应该使用调度程序调度您的操作

actions.js:

export const setEntries = (newEntries, soldEntries) => ({
    type: 'ENTRY_ACTION_NAME',
    newEntries,
    soldEntries
})

你的组件：

import {connect} from 'react-redux';
import {setEntries} from './actions';

const YourComponent = ({setEntries}) => {
   /** your stuff here */
   useEffect(() => {
        var index;
        if (product_id === 'lime') index = 0
        if(product_id === 'travetine') index = 1
        // console.log(entry, index)
        setEntries(entry === 'new-entries' ? index : undefined,entry === 'sold-entries' ? index : undefined);
    }, []);
/**  rest of your stuff here */
}

export default connect(state => ({
  // state to props mappings here
}), dispatch => ({
  setEntries: (newEntries, soldEntries) => dispatch(setEntries(newEntries, soldEntries))
}))(YourComponent);

然后在你的减速器处理'ENTRY_ACTION_NAME'动作的某个地方。

在redux中路由时如何将redux存储发送到客户端

how to send redux store to the client when routing in redux

javascript

reactjs

server-side-rendering

react-redux

next.js