Discussion on: Learn the Redux Architecture by Creating the Minimal TODO App on top of NEXT.js

View post

Hi, Nice article. Thank you.

I would like to use redux dev tools with this in development, but I am finding it difficult to setup.
Here is the link to the tool documentation. github.com/zalmoxisus/redux-devtoo...

Can you help take a look?

Jatto Abdulqahhar • Nov 23 '19

Thanks, I have figured this out.

What I did!

Added the 'redux-devtools-extension' package (yarn add redux-devtools-extension)
Import the composeWithDevTools (import { composeWithDevTools } from 'redux-devtools-extension';)
Create a composeEnhancers (const composeEnhancers = composeWithDevTools({});)
wrap the applyMiddleware function with the composeEnhancers Function (composeEnhancers(applyMiddleware(...middlewares)))

Update Store.ts file

import thunkMiddleware from 'redux-thunk';
import {
  createStore,
  applyMiddleware,
  Store as ReduxStore,
} from 'redux';
import { createLogger } from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducers, { initialState } from './reducers';

const dev: boolean = process.env.NODE_ENV !== 'production';

export type Store = ReduxStore<typeof initialState>;

const composeEnhancers = composeWithDevTools({});

export default (state = initialState): Store => {
  const middlewares = dev ? [thunkMiddleware, createLogger()] : [];
  return createStore(
    reducers,
    state,
    composeEnhancers(applyMiddleware(...middlewares))
  );
};

Shiono Yoshihide • Nov 24 '19

Yes, you have done right!

Or just replace compose with composeWithDevtools like this commit:

const { composeWithDevTools } = dev ? require('redux-devtools-extension') : require('redux-devtools-extension/logOnlyInProduction');

export default (state = initialState): Store => {
  const middlewares = dev ? [thunkMiddleware, createLogger()] : [];
  return createStore(reducers, state, composeWithDevTools(applyMiddleware(...middlewares)));
};

Jatto Abdulqahhar • Nov 24 '19

Thanks, Do you have an idea of how to include SCSS to this setup?

Shiono Yoshihide • Nov 24 '19

This is a NEXT.js side.
Please see github.com/zeit/next.js/tree/canar...