Header
component like you said that tries to read from the cart
key of the state
/
there is no cart
key there just yet
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.
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
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.
/**
* 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))
}
}
}
``` function booksReducer(state = [], action) {
switch (action.type) {
case ACTIONS.ADD_BOOK:
return [...state, Object.assign({}, action.bookData)];```
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);
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 ?
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.