如何实现Redux DevTools？

Question

这是index.js

import { createStore, applyMiddleware } from "redux";
import rootReducer from "./reducers/reducers";

const store = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
  <Provider store={store(rootReducer)}>
    <App />
  </Provider>,
  document.getElementById("root")
);

为了能够使用Redux DevTools，我需要添加以下代码：

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

我试过这个：

import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./reducers/reducers";

const initialState = {};

const middleware = [ReduxPromise];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

ReactDOM.render(
  <Provider store={store(rootReducer)}>
    <App />
  </Provider>,
  document.getElementById("root")
);

但后来我得到了这个错误：TypeError：store不是一个函数

我究竟做错了什么？

Answer 1

这条线错了：

store(rootReducer)

您已经通过调用createStore(rootReducer)创建了商店。正如错误所说，store不是一个函数，你不能“调用”它。只需通过<Provider store={store}>。

另请注意，our new Redux Starter Kit package可以帮助您简化商店设置过程。