-1

How can I get the data present in a store that has been already populated to use it in the render function?

For example:

   ReactDOM.render(
     <Provider store={store}>
       <Layout/>
     </Provider>,
     document.getElementById('app')
   );

Here I need to send data to the Layout component from the store, which already has the data. Is it possible to send the changed data each time there is a corresponding change in the store?

Bart Riordan
  • 436
  • 3
  • 8
  • 23
random_user1213
  • 133
  • 1
  • 8
  • Have you tried anything? Read docs for `Provider` to begin with. – Yury Tarabanko Jul 07 '16 at 11:55
  • If you connect a react component to values in the store the component will automatically re-render when changes to the values occur. See http://redux.js.org/docs/basics/UsageWithReact.html – Robin Jul 07 '16 at 12:53
  • I have gone through the documentation but still I don't have any solution and for now I know how to get data in the container of the data using connect() but I need the data that is initially populated for eg I already have the data for the Layout populated from a form from the user , now I need those values to pass to the Layout Container. – random_user1213 Jul 07 '16 at 13:21

1 Answers1

0

The provider puts the store on the React component context. You then use the @connect decorators in your component definition (in this case Layout) to connect to the store and select the data you need.

The connect accesses the store from the context and subscribes to changes, so that every time the data in the store changes the component is re-rendered. You should never pass the store via props, it's bad practice. You can pass the connected properties down to children of course, but never the complete store.

The initial data that you put in the store will be rendered the first time your app mounts to the DOM. Every change thereafter (user form submit) will mutate the store and your component will update through the connect mechanism.

The Redux docs are well written. I suggest you take a closer look at them. There's also plenty of tutorials about Redux that are free, for example on egghead.io.

Thijs Koerselman
  • 21,680
  • 22
  • 74
  • 108