Next.js: can not fetch data in getInitialProps in with-redux-wrapper example

Created on 26 Oct 2019  路  4Comments  路  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)

Most helpful comment

how about instead of moving everyone to spectrum to the things you clearly don't know about.. you simply learn saying "sorry i dont know?"

We automatically close issues that don't follow the issue template and move them to spectrum as that's where the community lives and it's more likely to get answered by community members.

As for the rest of your message please read our code of conduct: https://github.com/zeit/next.js/blob/canary/CODE_OF_CONDUCT.md

All 4 comments

Please follow the issue template.

https://github.com/zeit/next.js/issues/new/choose

https://github.com/zeit/next.js/issues/new?template=8.Question_about_next.md

# Question about Next.js

GitHub Issues are reserved for Bug reports and Feature requests. The best place to get your question answered is to post it on https://spectrum.chat/next-js.

@timneutkens weird, i don't think you need template when the matter is super clear? and even so at least this doesn't mean closing the issue (it is not marked resolved)? have you answered this issue some other place?

how about instead of moving everyone to spectrum to the things you clearly don't know about.. you simply learn saying "sorry i dont know?"

how about instead of moving everyone to spectrum to the things you clearly don't know about.. you simply learn saying "sorry i dont know?"

We automatically close issues that don't follow the issue template and move them to spectrum as that's where the community lives and it's more likely to get answered by community members.

As for the rest of your message please read our code of conduct: https://github.com/zeit/next.js/blob/canary/CODE_OF_CONDUCT.md

+1 still having this issue , any way out

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Vista1nik picture Vista1nik  路  55Comments

Timer picture Timer  路  60Comments

dunika picture dunika  路  58Comments

nickredmark picture nickredmark  路  60Comments

tomaswitek picture tomaswitek  路  73Comments