Nextjs redux, thunk and getInitialProps - how to implement

Question

I want to use nextjs in my new project with redux and thunk also. I wondering how to implement all packages correctly.

In my previous projects pages has HOC components like:

import {connect} from 'react-redux';
import Page from './about';
import {fetchUsers} from '../../actions/user';

const mapStateToProps = (state) => {
    const {users} = state;
    return users;
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchUsers: () => dispatch(fetchUsers())
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Page);

And method to fetch users I implemented in componentDidMount

How to implement the same logic for nexjs?

What have I do?

1. Implemented store (base on next-redux-wrapper in _app.js)
2. Created HOC component (like below) with mapStateToProps and mapDispatchToProps

Currently I thinking about use somehow this.props.fetchUsers method into getInitialProps - documentation say that this method should be used to fetch data before render site.

Please help me with correctly redux implementation for nextjs

Solution

You can follow this example The correct way is to pass the store to the getInitialProps context and to the App component so you can pass it to the Provider.

The getInitialProps can't access to instance of the component, this is not accessible, so you can't call this.props.fetchUsers, but, because you are passing store to its context, you can do store.dispatch(fetchUsers()) and remove dispatch from mapDispatchToProps.

Generally I dispatch actions in getInitialProps and then map state to props within connect.

Comments

[marczak]

So mapDispatchToProps is unnecessary in nextjs for that?

[marczak]

how do that after refresh page? I mean on server side? On Client side it's working (used Link) but on server not.

[giggi__]

mapDispatchToProps is unnecessary in pages if you dispatch actions only in getInitialProps. Furthermore, it should work even if you reload the page. If you are using redux devtools, you will not see dispatched action because on reload it is made server side.

[marczak]

But on server side it doesn't work. As I investigated store.dispatch not work on server side. I tried console log in reducer but on server console it doesn't present.

[Ewomazino Ukah]

please does this mean that there is not need to implement 'componentDidMount' for fetching the data on the client side for client side routing ?

[giggi__]

@MazinoSUkah it depends on your needs. If you have to dispatch actions in routes you can avoid componentDidMount

[julesbou]

@marczak you need to use with await, like this: await store.dispatch(...)

[IgalSt]

Take a look at connect-initial-props, this is a small decorator I've created to get state and dispatch easily from getInitialProps github.com/webiya/connect-initial-props