Как реализовать 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")
);

Но тогда я получаю эту ошибку: Ошибка типа: store не является функцией

Что я делаю не так?

Answer 1

Эта строка неверна:

store(rootReducer)

Вы уже создали магазин, позвонив по номеру createStore(rootReducer). Как говорится в ошибке, store не является функцией, и вы не можете «вызвать» ее. Просто пройдите <Provider store={store}>.

Также обратите внимание, что наш новый пакет Redux Starter Kit может помочь вам упростить процесс настройки магазина.