Added next-redux-wrapper to example

[kirill-konshin]

First of all, thank for great software!

I have made it a bit easier for developers to integrate Redux with Next.js, basically, I reworked your example and made a package https://github.com/kirill-konshin/next-redux-wrapper that hides all the underlying complexity from end users.

I thought it would be a bad idea to drag redux-related dependencies to main next package, that's why it's a separate package.

The purpose of this PR: I have simplified the example using this component.

[rauchg]

maybe call it withRedux ?

[kirill-konshin]

Name of the function could be any because it's a default export, it my code it does not even have a name :) but yes, makes sense.

[rauchg]

yep

[rauchg]

Awesome. Please explain in the README what next-redux-wrapper is and what it does? So that it doesn't seem like a lot of magic is at play

[kirill-konshin]

Done, there's no magic -- it auto-creates store when getInitialProps is called and then passes it down to Provider, also automatically. On the client side it also takes care of using same store every time.

[rauchg]

Thank you @kirill-konshin ! cc @impronunciable

[impronunciable]

Awesome sauce! I'll take a look

[amitsch666]

Stupid question for @kirill-konshin and other experts here: How do I access the store outside of getInitialProps()? Say I want to dispatch an action from my onSubmit() method?

I am trying to call the dispatch method from within my onSubmit() like so:

onSubmit(e) {
    e.preventDefault();
    axios.post('/api/authentication/login', { username: this.state.username, password: this.state.password })
      .then(function (response) {
        console.log(response);
        console.log('First: ', response.data.firstName);
				// dispatch user data to the store
				this.props.testclick(response.data.email);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

And my mapDispatchToProps() is defined:

const mapDispatchToProps = (dispatch) => {
	return {
		testclick: (currUser) => dispatch({ type: 'FOO', payload: currUser })
	}
}

However, when I run it, the browser throws an error on this line saying this is undefined:

this.props.testclick(response.data.email);

Any workaround?

[amitsch666]

Never mind, a simple self = this resolved the issue. Silly me!