1

enter image description hereI am learning redux and came up with an example using a webservice that returns data. Everything is working. However I configured the redux developer tools below.

I got an error saying my store is assigned a value but never used and when I go into my dev tools, I am not able to see my state data. Am i doing something wrong?

        import React from 'react';
        import ReactDOM from 'react-dom';
        import { BrowserRouter as Router, Route } from 'react-router-dom';
        import promise from 'redux-promise';
        import { Provider } from 'react-redux';
        import { createStore, applyMiddleware, compose } from 'redux';

        import reducers from './reducers';
        import ProductsIndex from './components/products_index';

        const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

        const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
        const store = createStore(
          reducers,
          composeEnhancers(applyMiddleware())
        );

        ReactDOM.render(
          <Provider store={createStoreWithMiddleware(reducers)}>
           <Router>
            <div>
              <Route path="/" component={ProductsIndex} />
            </div>
           </Router>
          </Provider>
          , document.querySelector('#root'));

Error: Line 14:7: 'store' is assigned a value but never used no-unused-vars

enter image description here

Baba
  • 2,059
  • 8
  • 48
  • 81
  • Could you please change `const createStoreWithMiddleware = applyMiddleware(promise)(createStore);` to `const createStoreWithMiddleware = applyMiddleware(promise)(store);` and put it right after `store` initialization. Not sure about the `applyMiddleware` syntax let's try and see. – Ed C Nov 07 '19 at 20:22
  • Or you can do something like this: `const middleware = [promise];` `const composEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;` `const enhancer = composEnhancers(applyMiddleware(...middleware));` `const configureStore = (initialState?: any) => { return createStore(reducers, initialState, enhancer); };` `` – Ed C Nov 07 '19 at 20:28
  • None of this work for me – Baba Nov 07 '19 at 20:33
  • What is the error? – Ed C Nov 07 '19 at 20:38
  • From the first solution you provided, I got TypeError: createStore.apply is not a function – Baba Nov 07 '19 at 20:42
  • And second one? – Ed C Nov 07 '19 at 20:43
  • const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore( reducers, composeEnhancers(applyMiddleware()) ); const createStoreWithMiddleware = applyMiddleware(promise)(store); – Baba Nov 07 '19 at 20:43
  • I just added a screen shot of the error I was getting from the second solution. The state is now displayed though in the dev tools – Baba Nov 07 '19 at 20:55
  • Oh my bad please remove that `?: any` it's a typescript – Ed C Nov 07 '19 at 21:10
  • Thanks. Removed and works great. Out of curiosity, if I decide to use a redux thunk in the future, where will it go? – Baba Nov 07 '19 at 21:13
  • I'll post an answer with thunk included – Ed C Nov 08 '19 at 13:07

1 Answers1

0

Here is what I usually do.

configureStore.js

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import createRootReducer from "../reducers";

const middleware = window.ENV.environment === "local" ? [thunk, logger] : [thunk];
const composEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composEnhancers(applyMiddleware(...middleware));

const configureStore = (initialState) => {
  return createStore(createRootReducer(), initialState, enhancer);
};

export default configureStore;

App.js

import configureStore from "./configureStore";
const store = configureStore();

const App = () => {
  return (
    <Provider store={store}>
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        // ...
      </BrowserRouter>
    </Provider>
  );
};
Ed C
  • 313
  • 1
  • 8