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
@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.
@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
@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.
appreciate
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.
I'm new here
Can someone tell me if you could implement react-toolbox successfully?
thanks in advance
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.
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.
Can anyone help me out?
``` function booksReducer(state = [], action) {
switch (action.type) {
case ACTIONS.ADD_BOOK:
return [...state, Object.assign({}, action.bookData)];```
do I need to activate something to import plain css to a component?
like I'd need a basic .css which a npm component provides
but doing the
import doesnt seem to include it
(
import 'react-trumbowyg/dist/trumbowyg.min.css'; )
Hi, I have a parent component that have access to all my actions. But I need some actions available by the child component.
What is best practice here?
Send it as a prop:<Component action={this.props.action} />
or import it?
import * as action from './actions.js'
Or should I use:
connect(
mapStateToProps, mapDispatchToProps
)(component);
@lundgren2 That's really a philosophical question, but I would recommend reading this: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
here i need to add one custom property to overlay object
here is the object structure:-
{
overlay : {
position : 'fixed',
top : 0,
left : 0,
right : 0,
bottom : 0
},
content : {
position : 'absolute',
top : '40px',
left : '40px',
right : '40px',
bottom : '40px'
}
}can anyone help me on this ?
@SagarSAmrutkar_twitter
Object.assign isn't supported in IE. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign. Consider a polyfill if you need to support that browser.
I want to put a search box in my CoreComponent / PageLayout, that fires the search on the active component. Any suggestions on the best way? Or should I redux it to a connected property?