score:1
you should listen to the hashchange event and update the state once it changed. to perform two-way binding you also should listen to the state changes and update window hash once the state changed. this is the idea of how it can work (fiddle):
function changehash(state = '', action) {
if(action.type == 'change_hash')
return action.hash;
return state;
}
const store = redux.createstore(changehash);
store.subscribe(() => {
const hash = store.getstate();
if (window.location.hash !== hash) {
window.location.hash = hash;
console.log('state changed: ' + hash);
}
});
window.addeventlistener("hashchange", () => {
const hash = window.location.hash;
if (store.getstate() !== hash) {
store.dispatch({
type: 'change_hash',
hash
});
console.log('hash changed: ' + hash);
}
}, false);
settimeout(() => {
store.dispatch({
type: 'change_hash',
hash: '#changed-state'
});
}, 3000);
settimeout(() => {
window.location.hash = '#changed-hash';
}, 6000);
score:0
i was inspired by alexander bykov's answer + redux-persist and made this - an enhancer, that makes two-way binding of hash<->store.
import { applymiddleware } from 'redux';
import createactionbuffer from 'redux-action-buffer';
const change_hash = '@@hashsynch/change_hash';
const hashenhancer = (hashfromstate, statefromstateandhash) => createstore => (reducer, initialstate) => {
const store = createstore(liftreducer(reducer), initialstate, applymiddleware(createactionbuffer(change_hash)));
store.subscribe(() => {
const hash = hashfromstate(store.getstate());
if (window.location.hash !== hash) {
window.location.hash = hash;
}
});
window.addeventlistener('hashchange', () => {
const hash = window.location.hash;
const savedhash = hashfromstate(store.getstate());
if (savedhash !== hash) {
store.dispatch({
type: change_hash,
hash
});
}
}, false);
store.dispatch({
type: change_hash,
hash: window.location.hash
});
function liftreducer(reducer) {
return (state, action) => {
if (action.type !== change_hash) {
return reducer(state, action);
} else {
return statefromstateandhash(state, action.hash);
}
}
}
return {
...store,
replacereducer: (reducer) => {
return store.replacereducer(liftreducer(reducer))
}
}
};
use like this:
export const store = createstore(
reducer,
initialstate,
hashenhancer(hashfromstate, statefromstateandhash)
);
where hashfromstate is function of type hash=>state, and statefromstateandhash is function (state, hash) => state.
it might be overengineered and router would be simplier, i just don't understand react-router or react-router-redux at all.
Source: stackoverflow.com
Related Query
- Two way binding of URL hash and Redux state
- How to sync Redux state and url hash tag params
- Correct way to throttle HTTP calls based on state in redux and react
- I have built a global state redux like pattern with context and hooks. Is there a way to combine reducers?
- Redux Simple Router - Change state AND URL
- React and Redux: Proper Way To Store Loading State in Redux
- How would one do two way data binding with react, having an input value A update when B is, and vice versa?
- In React, is there an elegant way of using the id in a RESTful edit url and loading the corresponding object into the initial state of my component?
- Chain two redux actions and use the updated state in the second one
- Redux saga - error binding - appropriate way to bind error to local state
- Two way binding and wiring an onChange for a child class
- How to create and name two identical stateful components, where one uses Redux state and the other local state?
- ReactJs : What is the proper way of accessing the state data in the root component where the link between React and Redux has been implemented?
- How to separate UI and application state in Redux
- Right way to update state in redux reducers
- Dealing with local state in react and redux
- Should I use redux-form store instead of component state and Redux custom store?
- How to organize state with redux and react-router?
- No need for state in React components if using Redux and React-Redux?
- how to rerender a component when hash change and change the state
- Is there a cleaner way of getting current URL in both client and server side in isomorphic react apps?
- React components lifecycle, state and redux
- How to respond to state change in redux and dispatch another action?
- how and when to call a react component methods after state change from redux
- synchronise scroll of two react components without using state and actions
- Best way to handle loading, success and error in redux
- TypeError: state is not iterable on react and redux
- What is the best way to implement undo state change (undo store/history implementation) in React Redux
- ReactJS: Best way to check state values and update render based on state?
- Sync queryParameters with Redux state and react router for function components
More Query from same tag
- How to create a pannable real-time chart
- reactJS Unexpected token, expected ";" in constructor
- Background image flashes when changed via state
- Unexpected token p in JSON at position 0 in fetch
- ReactJS / JavaScript : Not receiving resize event for many cases
- Multiple components to result in one value with Formik
- How to register cypress `code-coverage` plugin with cypress v10?
- Recursive component does not load the child in React
- how to link to arrays, so when one item is click will find and display its pair?
- Using terser webpack plugin how to avoid building with comments
- Why isn't Formik.setStatus updating the Status state in my form?
- Generic Typescript Type + React hook
- Giving border-right causing miss alignment issue
- Re-render Canvas in React Js
- Getting a child's default props to set the state in the parent in ReactJS
- Fetching data before rendering server side
- The proper way to add elements in react?
- Is there a better way to split the reducers to smaller pieces?
- Highcarts: Hide xAxis categorie when serie is not visible
- Redirect to another page after GET call in modal form in React
- How to mock async call in React functional component using jest
- Add and Remove event listeners in React with componentDidMount and componentWillUnmount
- On click go back to previous state or trigger function in Reactjs
- Invalid href passed to router error after fresh installed create-next-app
- Webpack babel es6 giving me errors with react-router 1.0 "module not found"?
- Why React Doesn't Redirect to route?
- useState what am I doing wrong?
- Converting a dynamic array into single object
- how to match a returned Promise in using Jest with redux action
- React Hooks .map is not a function