React-starter-kit: How to access redux store from home route or component.

Created on 2 Dec 2016  路  5Comments  路  Source: kriasoft/react-starter-kit

Does anyone have any basic pointers on how to access (and update) the global store?

I have merged the redux feature into master.

When I run the server I get the following in the console:
SET_RUNTIME_VARIABLE: { name: 'initialNow', value: 1480609977766 }

Which I assume means the store / redux is actually working (on runtime).

I have followed the integration tutorial:

  • I have created a constant, action, reducer and then combined them.

Now I'm not sure how to dispatch from the component or route .js files.

Any help would be amazing!

branch featurredux question

Most helpful comment

@DylanYasen

const route = {
  path: '/news',
  async action({ store }) {
    let news = store.getState().news;
    if (!news) {
      await store.dispatch(fetchNews())
      news = store.getState().news;
    }
    return {
      title: 'News',
      component: <Layout><News news={news} /></Layout>
    }
  }
}

function fetchNews() { // redux action
  return (dispatch) => {
    dispatch({ type: 'NEWS_FETCH' })
    return fetch('/api/news') // return promise
      .then(resp => resp.json())
      .then(news => dispatch({ type: 'NEWS_FETCH', payload: news, error: false }))
      .catch(error => dispatch({ type: 'NEWS_FETCH', payload: error, error: true }))
  }
}

All 5 comments

I am also looking for some pointers here.

@tomawilkinson @Jaikant:
Look at LanguageSwitcher component in feature/react-intl

I'm struggling about this part as well.
I can fetch data in routes on the server side and pass down to components as props
And I can fetch data in components on the client side using redux actions.
But i just can't figure out how to fetch data in routes on server side and pass down the redux store with the data.
:(

@DylanYasen

const route = {
  path: '/news',
  async action({ store }) {
    let news = store.getState().news;
    if (!news) {
      await store.dispatch(fetchNews())
      news = store.getState().news;
    }
    return {
      title: 'News',
      component: <Layout><News news={news} /></Layout>
    }
  }
}

function fetchNews() { // redux action
  return (dispatch) => {
    dispatch({ type: 'NEWS_FETCH' })
    return fetch('/api/news') // return promise
      .then(resp => resp.json())
      .then(news => dispatch({ type: 'NEWS_FETCH', payload: news, error: false }))
      .catch(error => dispatch({ type: 'NEWS_FETCH', payload: error, error: true }))
  }
}

@frenzzy thank you so much for the help! Appreciate it!
I didn't notice the context which contains the store was passed to UniversalRouter

const route = await UniversalRouter.resolve(routes, {
    ...context,
    path: req.path,
    query: req.query,
});
Was this page helpful?
0 / 5 - 0 ratings

Related issues

buildbreakdo picture buildbreakdo  路  3Comments

fchienvuhoang picture fchienvuhoang  路  3Comments

Bogdaan picture Bogdaan  路  3Comments

rochadt picture rochadt  路  3Comments

pfftdammitchris picture pfftdammitchris  路  3Comments