How do I access store state in React Redux

Question

I am just making a simple app to learn async with redux  I have gotten everything working  now I just want to display the actual state onto the web-page  Now  how do I actually access the store s state in the render method     Here is my code  everything is in one page because I m just learning      const initialState              fetching  false           fetched  false           items               error  null           const reducer    state initialState  action    gt         switch  action type             case  REQUEST PENDING                  return     state  fetching  true                       case  REQUEST FULFILLED                  return                       state                   fetching  false                   fetched  true                   items  action payload                                    case  REQUEST REJECTED                  return     state  fetching  false  error  action payload                         default                return state                const middleware   applyMiddleware promise    thunk  logger      const store   createStore reducer  middleware      store dispatch        type   REQUEST        payload  fetch  http   localhost 8000 list   then  res   gt res json            store dispatch        type   REQUEST        payload  fetch  http   localhost 8000 list   then  res   gt res json            render        lt Provider store  store  gt            lt div gt                 this props items map  item    gt   lt p gt   item title   lt  p gt               lt  div gt        lt  Provider gt        document getElementById  app            So  in the render method of the state I want to list out all the item title from the store     Thanks

User · Answer

You need to use Store getState   to get current state of your Store   For more information about getState   watch this short video

User · Answer

You should create separate component  which will be listening to state changes and updating on every state change   import store from     reducers store    class Items extends Component     constructor props        super props        this state           items                  store subscribe      gt             When state will be updated in our case  when items will be fetched             we will update local component state and force component to rerender           with new data         this setState           items  store getState   items                           render         return          lt div gt           this state items map  item    gt   lt p gt   item title   lt  p gt            lt  div gt                 render  lt Items   gt   document getElementById  app

User · Answer

If you want to do some high-powered debugging  you can subscribe to every change of the state and pause the app to see what s going on in detail as follows   store js  store subscribe       gt      console log  state n   store getState       debugger        Place that in the file where you do createStore   To copy the state object from the console to the clipboard  follow these steps    Right-click an object in Chrome s console and select Store as Global Variable from the context menu  It will return something like temp1 as the variable name  Chrome also has a copy   method  so copy temp1  in the console should copy that object to your clipboard    https   stackoverflow com a 25140576  https   scottwhittaker net chrome-devtools 2016 02 29 chrome-devtools-copy-object html  You can view the object in a json viewer like this one  http   jsonviewer stack hu   You can compare two json objects here  http   www jsondiff com

User · Answer

You want to do more than just getState   You want to react to changes in the store   If you aren t using react-redux  you can do this   function rerender         const state   store getState        render           lt div gt                state items map  item    gt   lt p gt   item title   lt  p gt              lt  div gt           document getElementById  app                subscribe to store store subscribe rerender       do initial render rerender        dispatch more actions and view will update   But better is to use react-redux   In this case you use the Provider like you mentioned  but then use connect to connect your component to the store

User · Answer

Import connect from react-redux and use it to connect the component with the state connect mapStates mapDispatch  component   import React from  react   import   connect   from  react-redux     const MyComponent    props    gt        return          lt div gt           lt h1 gt  props title  lt  h1 gt         lt  div gt                   Finally you need to map the states to the props to access them with this props   const mapStateToProps   state   gt      return       title  state title         export default connect mapStateToProps  MyComponent     Only the states that you map will be accessible via  props  Check out this answer  https   stackoverflow com a 36214059 4040563  For further reading   https   medium com  atomarranger redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

[javascript] How do I access store state in React Redux?

Examples related to javascript

Examples related to asynchronous

Examples related to reactjs

Examples related to redux

Examples related to react-redux

Examples related to react-state