12

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

marczak
  • 489
  • 2
  • 8
  • 17

1 Answers1

9

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.

giggi__
  • 1,793
  • 1
  • 11
  • 12
  • So `mapDispatchToProps` is unnecessary in `nextjs` for that? – marczak Jul 26 '18 at 05:29
  • how do that after refresh page? I mean on server side? On Client side it's working (used Link) but on server not. – marczak Jul 27 '18 at 05:32
  • `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. – giggi__ Jul 27 '18 at 07:01
  • 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. – marczak Jul 30 '18 at 08:13
  • please does this mean that there is not need to implement 'componentDidMount' for fetching the data on the client side for client side routing ? – Ewomazino Ukah Apr 21 '19 at 15:57
  • @MazinoSUkah it depends on your needs. If you have to dispatch actions in routes you can avoid `componentDidMount` – giggi__ Apr 23 '19 at 08:03
  • @marczak you need to use with `await`, like this: `await store.dispatch(...)` – julesbou Oct 20 '19 at 20:06
  • Take a look at `connect-initial-props`, this is a small decorator I've created to get state and dispatch easily from `getInitialProps` https://github.com/webiya/connect-initial-props – IgalSt Apr 19 '20 at 06:18