将 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 是未定义的。

当我创建自己的 redux 存储时，我无法将开发工具连接到商店。

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

沙盒在这里(在店里.js(

Answer 1

工作版本在这里。

创建 s 变量时，我不应该调度任何东西，以设置我所做的值：

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

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

存储部分代码：

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