URL哈希和Redux状态的双向绑定

Question

我现在正在学习Redux和React，我正在写一个像这样的爱好项目。

该项目是一个使用标记进行搜索的搜索服务。用户可以在UI中添加或删除标记。在代码中，标记以Redux状态表示，添加和删除标记通过单独的操作进行。到目前为止还不错，我有一个玩具代码可以使用。

现在我想用哈希之后的URL部分“绑定”标签；例如，序列化标记，用破折号分隔；这样用户就可以复制/粘贴URL并拥有相同的标记。

我找不到如何轻易做到这一点。

我总是点击一个叫做“react router”的东西，但我在示例中看到的是，总是有更多的输入点指向应用程序，并根据散列向用户显示应用程序的不同部分。我不想那样。所以我不知道我是否真的需要这个路由器；我不想走任何路线。

即使我想要这个，我也找不到如何将Redux状态与URL绑定。我不想将标签直接注入组件的道具；我希望url中的标记处于Redux状态。

感觉好像我做错了什么，我需要重新思考我的整体设计，但我不知道从哪里开始。

（我没有添加任何实际代码，因为我认为这是关于应用程序设计的更一般的问题，但我可以稍后简化我的玩具代码并粘贴到这里）

Answer 1

我从亚历山大·比科夫的答案中得到了灵感，redux坚持并使其成为一种增强器，它可以实现哈希的双向绑定

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))
    }
  }
};

这样使用：

export const store = createStore(
    reducer,
    initialState,
    hashEnhancer(hashFromState, stateFromStateAndHash)
);

其中hashFromState是hash类型的函数=

它可能是过度的，路由器会更简单，我只是不明白反应路由器或反应路由器redux在所有。

Answer 2

您应该侦听hashchange事件，并在其更改后更新状态。要执行双向绑定，还应侦听状态更改，并在状态更改后更新窗口哈希。这就是它的工作原理（小提琴）：

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);