将 redux devtools 与自己的商店连接

Question

当我使用 redux 时可以提供增强器，我自己编写了增强器并返回 redux devtool 增强存储：

const myCreateStore = (reducer, initialState, enhancer) => {
  console.log('xxxxxx', initialState);
  return createStore(reducer, initialState, enhancer);
};
const defaultState ={count:1};
const store = myCreateStore(
  reducer,
  defaultState,
  () => (reducer, initialState) => {
    return window.__REDUX_DEVTOOLS_EXTENSION__()(
      myCreateStore
    )(reducer, initialState);
  }
);

当 redux 开发工具调用 myCreateStore 时，initalState 是未定义的。

当我创建 my own redux store 时，我无法将开发工具连接到商店。

//just ignore initial state since dev tools doesn't pass it
//  use state=initialState in reducer
const createStore = (reducer, nothing, enhancer) => {
  let listeners = [];
  if (typeof enhancer === 'function') {
    const devToolStore = enhancer(createStore)(reducer);
    //cannot return devToolStore because it's broken
    // getState will always try to return one currentStateIndex
    // too far
    window.devTool = devToolStore;
    //you can run devTool.dispatch({type:'UP',id:0})
    //  and it'll show up in the redux dev tool but
    //  currentStateIndex is falsely set so getState
    //  won't work and the last action shows state as
    //  undefined
    // return devToolStore;
    return createStore(reducer);
  }
  const s = {
    getState: () => s.value,
    subscribe: listener => {
      listeners.push(listener);
      return () =>
        (listeners = listeners.filter(l => l !== listener));
    },
    value: undefined,
    setValue: newValue => {
      if (s.value === newValue) {
        return;
      }
      s.value = newValue;
      listeners.forEach(listener => listener(newValue));
    },
    dispatch: action =>
      s.setValue(reducer(s.getState(), action)),
    reducer,
  };
  s.dispatch({ type: '@@INIT' });
  return s;
};

沙盒是here（在 store.js 中）

Answer 1

工作版here。

在创建 s 变量时，我不应该发送任何东西来设置我所做的值：

value: reducer(undefined, {
  type: `@@redux/INIT ${new Date().getTime()}`,
}),

该类型应以@redux/INIT 开头，否则将不起作用，尝试添加初始状态但开发工具会破坏它。

存储部分code：

//do not try to use initial state, redux dev tools won't
//  pass it along so have to adjust the signature to how
//  dev tools will call it
const createStore = (reducer, notUsed, enhancer) => {
  let listeners = [];
  const createStore = (reducer, notUsed, enhancer) => {
    if (typeof enhancer === 'function') {
      return enhancer(createStore)(reducer);
    }
    //even if you pass initial state and call reducer
    //  dev tools will flip and crash if it's anything
    //  but undefined
    let value = reducer(undefined, {
      type: `@@redux/INIT ${new Date().getTime()}`,
    });
    let setValue = newValue => {
      if (value === newValue) {
        return;
      }
      value = newValue;
      listeners.forEach(listener => listener(value));
    };
    const s = {
      getState: () => value,
      subscribe: listener => {
        listeners.push(listener);
        return () =>
          (listeners = listeners.filter(
            l => l !== listener
          ));
      },
      dispatch: action => {
        const newState = reducer(s.getState(), action);
        setValue(newState);
      },
    };
    return s;
  };

  return {
    useDispatch: () => store.dispatch,
    store: createStore(reducer, undefined, enhancer),
    useSelector: selector => {
      const state = useContext(StoreContext);
      return selector(state);
    },
  };
};