Next.js: Error: connect ECONNREFUSED 127.0.0.1:3001 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1106:14

Created on 26 Oct 2019 · 2Comments · Source: vercel/next.js

hi. I am new in nextjs. I have an project that I have store.js and _app.js files like this example https://github.com/zeit/next.js/tree/canary/examples/with-redux-wrapper. but when I dispatch my action in getInitialProps.It dose not return any post.there are my codes:
store.js

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'
import reducers from "./redux/reducers";

export const initializeStore = (initialState = {}) => {
    return createStore(
        reducers,
        initialState,
        composeWithDevTools(applyMiddleware(thunkMiddleware))
    )
}

_app.js in pages directory

import React from 'react'
import { Provider } from 'react-redux'
import App from 'next/app'
import withRedux from 'next-redux-wrapper'
import { initializeStore } from '../store'

export default withRedux(initializeStore)(
    class MyApp extends App {
        static async getInitialProps ({ Component, ctx }) {
            return {
                pageProps: Component.getInitialProps
                    ? await Component.getInitialProps(ctx)
                    : {}
            }
        }

        render () {
            const { Component, pageProps, store } = this.props
            return (
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            )
        }
    }
)

index.js file

import "../scss/styles.scss";
import React from "react";
import {connect} from 'react-redux';
import Header from "../components/header";
import {fetchPosts} from "../redux/actions/postAction";
import PostList from '../components/postList'

class Index extends React.Component {
    static async getInitialProps({store}) {
    await    store.dispatch(fetchPosts());
        return {}
    }

    render() {
        return (
            <React.Fragment>
                <Header/>
                <PostList posts ={this.props.posts}/>
            </React.Fragment>

        );
    }
}


const mapStateToProps = state => {
    return {
        posts: Object.values(state.posts),
        isSignedIn: state.auth.isSignedIn,
        userId: state.auth.userId
    }
}
export default connect(mapStateToProps,{fetchPosts})(Index);

and this is my action

export const fetchPosts = () => async dispatch => {
    const response = await api.get('/posts');
    dispatch({type: FETCH_POSTS, payload: response.data});
};

and postReducer.js

import _ from 'lodash';
import {CREATE_POST, FETCH_POSTS} from "../types";

export default (state = {}, action) => {
    switch (action.type) {
        case CREATE_POST:
            return {...state, [action.payload.id]: action.payload};
        case FETCH_POSTS:
            return {...state, ..._.mapKeys(action.payload, 'id')};
        default:
            return state;
    }
}

index.js in reducers directory

import {combineReducers} from "redux";
import authReducer from './authReducer';
import postReducer from "./postReducer";
import userReducer from "./userReducer";
import {reducer as fromReduce} from "redux-form";

const rootReducer = combineReducers({
    auth: authReducer,
    posts: postReducer,
    form: fromReduce,
    user:userReducer
});
export default rootReducer;

whats wrong with me?
error:
Error: connect ECONNREFUSED 127.0.0.1:3001
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1106:14)

Source