davezuko/react-redux-starter-kit

Get started with React, Redux, and React-Router!

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.