/
and the /cart
/
route sets a home
key to the global store
/cart
route sets a cart
key to the global store
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)];```