Last active
July 18, 2017 09:59
-
-
Save varjmes/18ff06d74a2cc2523d401a4dc11e6508 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import axios from 'axios' | |
| import getHost from '../../lib/getHost' | |
| export const REQUEST_CATEGORY = 'REQUEST_CATEGORY' | |
| function requestCategory (categoryId) { | |
| return { | |
| type: REQUEST_CATEGORY, | |
| categoryId | |
| } | |
| } | |
| export const RECEIVE_CATEGORY = 'RECEIVE_CATEGORY' | |
| function receiveCategory (categoryId, data) { | |
| return { | |
| type: RECEIVE_CATEGORY, | |
| categoryId, | |
| category: data | |
| } | |
| } | |
| export function fetchCategory (categoryId) { | |
| const baseUrl = `${getHost()}/api/categories/${categoryId}` | |
| return function (dispatch) { | |
| dispatch(requestCategory(categoryId)) | |
| return axios.get(baseUrl) | |
| .then((category) => { | |
| console.log(category.data) | |
| dispatch(receiveCategory(categoryId, category.data)) | |
| }) | |
| .catch(err => console.log(err)) | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react' | |
| import { bindActionCreators } from 'redux' | |
| import { connect } from 'react-redux' | |
| import withRedux from 'next-redux-wrapper' | |
| import Page from '../components/page' | |
| import Category from '../components/category' | |
| import { initStore } from '../store/store' | |
| import { fetchCategory } from '../store/actions/actions' | |
| class CategoryPage extends Component { | |
| static async getInitialProps ({ store, isServer, req }) { | |
| const categoryId = req.params.id | |
| store.dispatch(fetchCategory(categoryId)) | |
| .then(console.log(store.getState())) | |
| // returns an object {id: 1, label: 'butts'} | |
| } | |
| render () { | |
| console.log(this.props) // returns a dispatch function, an my next.js url object | |
| console.log(this.state) // null | |
| return ( | |
| <Page> | |
| <h1>Check to see if we got the category!!</h1> | |
| </Page> | |
| ) | |
| } | |
| } | |
| export default withRedux(initStore)(CategoryPage) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import { connect } from 'react-redux' | |
| import Head from './head' | |
| import Header from './header' | |
| export default connect(state => state)(({ children }) => { | |
| return ( | |
| <div> | |
| <Head /> | |
| <Header /> | |
| <main className='container'> | |
| { children } | |
| </main> | |
| <style jsx>{` | |
| .container { | |
| margin: 0 auto; | |
| padding: 15px; | |
| max-width: 800px; | |
| font-size: 1.2em; | |
| text-align: center; | |
| } | |
| `}</style> | |
| </div> | |
| ) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { REQUEST_CATEGORY, RECEIVE_CATEGORY } from '../actions/actions' | |
| export default categoryReducer | |
| function categoryReducer ( | |
| state = { | |
| isFetching: false, | |
| category: {} | |
| }, | |
| action) { | |
| switch (action.type) { | |
| case REQUEST_CATEGORY: | |
| return Object.assign({}, state, { | |
| isFetching: true | |
| }) | |
| case RECEIVE_CATEGORY: | |
| return Object.assign({}, state, { | |
| isFetching: false, | |
| category: action.category | |
| }) | |
| default: | |
| return state | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createStore, applyMiddleware } from 'redux' | |
| import { composeWithDevTools } from 'redux-devtools-extension' | |
| import thunkMiddleware from 'redux-thunk' | |
| import categoryReducer from './reducers/reducers' | |
| const initialState = { | |
| isFetching: false, | |
| category: {} | |
| } | |
| export const initStore = (intialState) => { | |
| return createStore(categoryReducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware))) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Think I've found the two issues.
connected components, notwithReduxpage components.getInitialPropsis only run on the server for first load, and the state wasn't being hydrated.changes:
store.js
import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import thunkMiddleware from 'redux-thunk'; import categoryReducer from './reducer'; + const defaultState = { + isFetching: false, + category: {}, + }; + + let initialState = + typeof __NEXT_DATA__ !== 'undefined' + ? __NEXT_DATA__.props.initialState + : defaultState; export const initStore = intialState => { return createStore( categoryReducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)) ); };page.js
import React from 'react'; import { connect } from 'react-redux'; + export default connect(state => state)(({ category, children }) => { + console.log(category); return ( <div> <main className="container"> <h1> + Category is: {category.label} </h1> {children} </main> <style jsx>{` .container { margin: 0 auto; padding: 15px; max-width: 800px; font-size: 1.2em; text-align: center; } `}</style> </div> ); });