how to send redux store to the client when routing in redux
So I am new to nextjs and I am unable to keep the dispatched state on the new built page after routing. Please how do we keep the state.
Basically I have a sidebar I am trying to keep the state of the active button. I tried using the getInitialProps to get url queries and useEffect to dispacth an action on load but the redux store is still empty.
useEffect
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 }) }, []); 
You should dispatch your action using dispatcher
actions.js:
export const setEntries = (newEntries, soldEntries) => ({ type: 'ENTRY_ACTION_NAME', newEntries, soldEntries }) your component:
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); and then somewhere in your reducer handle ‘ENTRY_ACTION_NAME’ action.
