Błędne przekazanie danych do redux'a

Question

Witam, tworzę stronę internetową opartą na react, redux, router, react-bootstrap. Wykorzystuję `yarn`. Zainstalowałem potrzebne narzędzia i stworzyłem podstawową ramę projektu. Podczas tworzenia `store.js` pojawił mi się błąd częściowo dlatego, że wykorzystuję macOS, a jest tam przypisanie narzędzia windows Redux DevTool. Jednak nie wiem jak połączyć 2 funkcje compose w jedną z odniesieniem się do redux-thunk oraz Redux DevTool na mac OS.

`It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function.`

Drugim błędem (warning) pojawił się po instalacji pakietów react-bootstrap `autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.` Instalowałem pakiety autoprefixera jednak to nic nie pomogło.

store.js

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import initialState from './initialState';
import tablesReducer from './tablesRedux';

const subreducers = {
  tables: tablesReducer,
};

const reducer = combineReducers(subreducers);
const store = createStore(
  reducer,
  initialState,
  composeWithDevTools(),

  compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__
      ? window.__REDUX_DEVTOOLS_EXTENSION__()
      : (f) => f
  )
);

export default store;

tablesRedux.js

//selectors
export const getTables = ({ tables }) => tables;
// actions
//const createActionName = (actionName) => `app/tables/${actionName}`;

// action creators
const tablesReducer = (statePart = [], action) => {
  switch (action.type) {
    default:
      return statePart;
  }
};
export default tablesReducer;

initialState.js

const initialState = {
  tables: [
    {
      id: '1',
    },
  ],
};

export default initialState;

Czy ma ktoś jakiś pomysł?

Answer 1

U siebie w appce mam tak :

 

const reducer = combineReducers(subreducers);

const composeEnhancers = composeWithDevTools({
    trace: true,
    traceLimit: 25,
});

const store = createStore(
    reducer,
    initialState,
    composeEnhancers(
        applyMiddleware(thunk),
    )),
);

 

Comments

Niestety błąd pozostał usunąłem, jedną cześć z kodu 

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import initialState from './initialState';
import tablesReducer from './tablesRedux';

const subreducers = {
  tables: tablesReducer,
};

const reducer = combineReducers(subreducers);
const store = createStore(
  reducer,
  initialState,
  composeWithDevTools(),
  compose(applyMiddleware(thunk))
);

export default store;

Korzystam z macOS, nie mogę wykorzystać tej części kodu do korzystania z Redux DevTool

window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f