Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 10 2018 02:41
    Naiba01 commented #1157
  • Sep 05 2018 18:37
    govarthananve commented #1080
  • Sep 05 2018 17:12
    carloquilala opened #1349
  • Aug 07 2018 11:42
    carloquilala edited #1348
  • Aug 07 2018 11:14
    carloquilala opened #1348
  • Jul 31 2018 06:46
    zaoansijia commented #1347
  • Jul 13 2018 01:45
    gapsaras commented #842
  • Jul 12 2018 10:08
    grootendorste commented #930
  • Jul 02 2018 15:06
    aozfen commented #1092
  • Jun 25 2018 17:25
    olliecaine27 closed #1268
  • Jun 03 2018 17:30
    olliecaine27 synchronize #1268
  • Jun 03 2018 17:16
    olliecaine27 synchronize #1268
  • May 22 2018 05:14
    ishan123456789 commented #1220
  • May 19 2018 08:38
    MirShi opened #1347
  • May 14 2018 19:53
    samanthi22 closed #1346
  • May 14 2018 19:53
    samanthi22 commented #1346
  • May 05 2018 17:33
    samanthi22 opened #1346
  • Apr 22 2018 09:28
    m-ketan closed #1319
  • Apr 20 2018 00:40
    matthew-dean commented #658
  • Apr 02 2018 12:36
    AndrewSavetchuk commented #1080
Carl Welch
@carlwelchdesign
how do you register a call back to let componentWillMount() know that all your data has been loaded into the store?
Carl Welch
@carlwelchdesign

I ended up doing this. Seems to work:

import React, { Component, PropTypes } from 'react'
import { browserHistory, Router } from 'react-router'
import { Provider } from 'react-redux'

class AppContainer extends Component {
    static propTypes = {
        routes : PropTypes.object.isRequired,
        store  : PropTypes.object.isRequired,
        loaded : PropTypes.bool.isRequired,
    }

    constructor() {
        super()
        this.state = {loaded : false}
    }

    componentWillMount = (nextState, replace, callback) => {
        const { routes, store } = this.props
        store.dispatch({type: 'GET_JSON_DATA', cb: this}) <--- include 'this' so I can call isLoaded() from my data-service actions
    }

    isLoaded(){
        console.log('isLoaded')
        this.setState({loaded: true})
    }

    shouldComponentUpdate () {
        return true
    }

    render () {
        const { routes, store } = this.props
        if(this.state.loaded){
            return (
                <Provider store={store}>
                    <div style={{ height: '100%' }}>
                        <Router history={browserHistory} children={routes}/>
                    </div>
                </Provider>
            )
        }else{
            return <div></div>
        }
    }
}

export default AppContainer

and in my data-service actions:

....
return axios.all([getPosts(), getPages(),getJobs()])
                .then(axios.spread(function (posts, pages, jobs) {
                    console.log('STORE LOADED')
                    action.cb.isLoaded() <-- I call the function isLoaded() in AppContainer.js
                }));
...
Shawn Mclean
@shawnmclean
Whats the recommended practice for runtime configurations? ie. variables that may differ per environment.
Roman Pearah
@neverfox
@shawnmclean I would recommend following the 12-factor app recommendation, i.e. use a single set of environment variables. You can set them up using config/project.config.js.
Tummala Dhanvi (c0mrad3)
@dhanvi
I am trying to create a simple front end application with react-redux-starter-kit , any resources would be welcome
Roman Pearah
@neverfox
@dhanvi That's a rather broad call for help.
Kostas Bariotis
@kbariotis
Hello everyone!
I would like to ask how would you connect a store to the Header component
What's the preferred method and why?
Roman Pearah
@neverfox
@kbariotis As with any component you want to make "smart," use react-redux's connect.
Kostas Bariotis
@kbariotis
@neverfox Thank you for replying
I haven't actually make it and im working on it for a few hours
This message was deleted
Kostas Bariotis
@kbariotis
Here's what I am trying to do
I have two routes the / and the /cart
the / route sets a home key to the global store
the /cart route sets a cart key to the global store
I have connect the Header component like you said that tries to read from the cart key of the state
but when someone lands into / there is no cart key there just yet
hows would you go about this?
I thought I would inject another reducer that would support the Header component thats why I am trying to access the store there
Creg Bradley
@creg
Quick Q: I want to define some sass constants that can be consumed in the other modules in the project. I've tried defining them in core.scss and _base.scss but I get an undefined variable error when I try to reference them. Any idea what I'm doing wrong?
Ryan Garant
@protoEvangelion
Does react-redux-starter-kit come with server side rendering built in?
Roman Pearah
@neverfox

@protoEvangelion No, this particular kit is for pure client-side development. From the README:

This project does not concern itself with the details of server-side rendering or API structure, since that demands an opinionated structure that makes it difficult to extend the starter kit.

kmeilgaard
@kmeilgaard
Hi! I was looking at the tests written for the starter kit, I'm new to testing and I was wandering why there were no tests for Container components like CounterContainer
Krisztian Balla
@successkrisz
@davezuko is anyone working on introducing webpack 2 to the project now, or is it something you'd consider adding to the project? If not I'm happy to start out on it.
@kbariotis if you depend on reducers regardless of route, then declare it on store creation, no need to load it async, then it will be available straight away
Krisztian Balla
@successkrisz
@carlwelchdesign Just an idea, I'd dispatch the action to load the initial data in main.js right after the store is created, and connect the CoreLayout to the store, than render a spinner in there if data is not available (even better: render a spinner only if it takes more than 200ms). As with an external store there's no need to worry about lifecycle hooks etc.. I believe it looks cleaner as well
@kmeilgaard container components mainly deal with side-effects, as glue between the store and components (in most cases) there's no point testing them in most cases. Like testing connect() belongs to the react-redux package really. in most react/redux applications most of the logic lives in action-creators, that's why most of the tests address that.
Krisztian Balla
@successkrisz
@creg You need to import them the file you define your constants in to the file you want to use them, otherwise sass-loader converts them individually and the variables wouldn't be defined in scope.
VisionCptn
@VisionCptn
Hello guys, can smb give link for real projects using this starter kit ?
appreciate
Roman Pearah
@neverfox
I admit that I really don't understand requests about real project examples, given that the starter kit pieces itself work pretty much the same in any size project (with the possible exception of some CSS things here and there), with all the added complexity coming from whatever you end up doing with React/Redux. In fact, if the kit is doing what it's supposed to be doing, you clone it, dive into the src folder and starting writing components. So really any sufficiently complex React/Redux example from anywhere should do, if that's what you need to examples of.
I mean, is there a specific aspect of the kit itself that is making it hard to figure out how to get started?
Not to say that I wouldn't happily link to one, but I imagine that most are like mine: proprietary work projects.
trongphan
@trongphan
Do you know when is the next release ? Would it be safe to clone the source and start working from there? Thanks,
gerblack
@gerblack
Hello guys
I'm new here
Can someone tell me if you could implement react-toolbox successfully?
thanks in advance
kmeilgaard
@kmeilgaard
@successkrisz thanks for your response, I could have figured that out myself, sorry! :)
kmeilgaard
@kmeilgaard
Hi, I'm trying to make my url leading in determining the state. My idea was to set the state from the route with a function 'stateFromRoute' and to update the location by building a new location object and using react-router-redux' push function.
/**
 * stateFromRoute can get executed when we enter the system through this route and we use the router state
 * as the source of truth for the state of the application
 */
export function stateFromRoute () {
    return (dispatch, getState) => {
        const {o: id} = getState().router.locationBeforeTransitions.query;
        id && dispatch(getObject(id))
    }
}

export function updateLocation (id) {
    return (dispatch, getState) => {
        const   location    = getState().router.locationBeforeTransitions,
                oldID       = location.query.o,
                oldPathname = location.pathname,
                pathname    = `/${route}/`,
                newLocation = {...location, query : {...location.query, o : id}, pathname}

        if (oldID !== id || oldPathname !== pathname) {
            // update the router. but only if the query changed
            dispatch(push(newLocation))
        }
    }
}
Now I'm doing this for all my routes, and I was wandering if my approach is correct, and if there is a possibility to do this more efficiently and robust, by for example, writing middleware for it.
Veaceslav Rabota
@vrabota
Hello, can you help me how can I use this starter kit with axios library (https://github.com/mzabriskie/axios). I have this API from ('http://api.giphy.com/v1/gifs/search?q=dog&limit=24&api_key=dc6zaTOxFJmzC')?
I want to create I new route (dogs), when user clicks will see list of dogs, I don't know where can I do my GET request with axios.
arumugapandiyan
@arumugapandiyan
Hi any one using create react app.. I have small doubts??
Kasper Meilgaard
@d1gits
Hi, quick question, I want to have some sort of preloading for assets imported in scss with this starterkit. Would react-preload work?
13colours
@13colours
is there any example of react-reformed normalizr and react-redux-starter-kit used together?
Naitik Soni
@naitik211
Hi, I am facing error of mutation while updating array of objects in reducer