I am intrigued by the best practices for rendering components and how to effectively rerender them to ensure they reflect the updated store.
Currently, in the project, there is a store that listens for react-router and stores the current location.
Store
export default (initialState = {slidesData}) => {
const store = createStore(
makeRootReducer(),
initialState
)
store.asyncReducers = {}
store.unsubscribeHistory = hashHistory.listen(updateLocation(store));
if (module.hot) {
module.hot.accept('./reducers', () => {
const reducers = require('./reducers').default
store.dispatch(reducers(store.asyncReducers))
})
}
return store
}
Location reducer
export const LOCATION_CHANGE = 'LOCATION_CHANGE';
const hash = '/#/',
browser = '/';
// Action
export function locationChange (location = hash) {
return {
type: LOCATION_CHANGE,
payload: location
}
}
// Action creator
export const updateLocation = ({ dispatch }) => {
return (nextLocation) => dispatch(locationChange(nextLocation))
}
// Reducer
const initialState = null;
export default function locationReducer (state = initialState, action) {
return action.type === LOCATION_CHANGE
? action.payload
: state
}
Upon initial application load, components subscribed to the store receive initialState = null. When the first route change occurs, the store updates and components now receive "/current-route".
Could you please provide insights on how to obtain "current-route" before subscribed components receive null, or suggest methods for handling component rendering when they initially receive null and need to trigger a rerender to display the updated store?