Accessing Redux state in an action creator

Question

Say I have the following   export const SOME ACTION    SOME ACTION   export function someAction       return       type  SOME ACTION          And in that action creator  I want to access the global store state  all reducers   Is it better to do this   import store from     store    export const SOME ACTION    SOME ACTION   export function someAction       return       type  SOME ACTION      items  store getState   otherReducer items          or this   export const SOME ACTION    SOME ACTION   export function someAction       return  dispatch  getState    gt        const  items    getState   otherReducer       dispatch anotherAction items

User · Answer

I agree with  Bloomca  Passing the value needed from the store into the dispatch function as an argument seems simpler than exporting the store  I made an example here    import React from  react   import  connect  from  react-redux   import   as actions from     actions    class App extends React Component      handleClick        const data   this props someStateObject data      this props someDispatchFunction data          render        return          lt div gt                lt div onClick   this handleClick bind this   gt Click Me  lt  div gt               lt  div gt                 const mapStateToProps    state    gt      return   someStateObject  state someStateObject        const mapDispatchToProps    dispatch    gt      return       someDispatchFunction  data    gt    dispatch actions someDispatchFunction data               export default connect mapStateToProps  mapDispatchToProps  App

User · Answer

I know I m late to the party here  but I came here for opinions on my own desire to use state in actions  and then formed my own  when I realized what I think is the correct behavior   This is where a selector makes the most sense to me  Your component that issues this request should be told wether it s time to issue it through selection    export const SOME ACTION    SOME ACTION   export function someAction items      return  dispatch    gt        dispatch anotherAction items            It might feel like leaking abstractions  but your component clearly needs to send a message and the message payload should contain pertinent state  Unfortunately your question doesn t have a concrete example because we could work through a  better model  of selectors and actions that way

User · Answer

I would like to suggest yet another alternative that I find the cleanest  but it requires react-redux or something simular - also I m using a few other fancy features along the way      actions js export const someAction    items    gt         type   SOME ACTION       payload   items            Component jsx import  connect  from  react-redux    const Component     boundSomeAction     gt    lt div     onClick  boundSomeAction    gt     const mapState     otherReducer   items      gt         items       const mapDispatch    dispatch    gt  bindActionCreators       someAction     dispatch    const mergeProps    mappedState  mappedDispatches    gt           you can only use what gets returned here  so you dont have access to  items  and          someAction  anymore     return           boundSomeAction       gt  mappedDispatches someAction mappedState items              export const ConnectedComponent   connect mapState  mapDispatch  mergeProps  Component         with  other mapped state or dispatches  Component jsx import  connect  from  react-redux    const Component     boundSomeAction  otherAction  otherMappedState     gt    lt div     onClick  boundSomeAction      onSomeOtherEvent  otherAction   gt       JSON stringify otherMappedState    lt  div gt     const mapState     otherReducer   items   otherMappedState     gt         items      otherMappedState       const mapDispatch    dispatch    gt  bindActionCreators       someAction      otherAction     dispatch    const mergeProps    mappedState  mappedDispatches    gt        const  items     remainingMappedState    mappedState      const  someAction     remainingMappedDispatch    mappedDispatch         you can only use what gets returned here  so you dont have access to  items  and          someAction  anymore     return           boundSomeAction       gt  someAction items              remainingMappedState             remainingMappedDispatch             export const ConnectedComponent   connect mapState  mapDispatch  mergeProps  Component     If you want to reuse this you ll have to extract the specific mapState  mapDispatch and mergeProps into functions to reuse elsewhere  but this makes dependencies perfectly clear

User · Answer

When your scenario is simple you can use  import store from     store    export const SOME ACTION    SOME ACTION   export function someAction       return       type  SOME ACTION      items  store getState   otherReducer items          But sometimes your action creator need to trigger multi actions  for example async request so you need  REQUEST LOAD REQUEST LOAD SUCCESS REQUEST LOAD FAIL actions  export const  REQUEST LOAD  REQUEST LOAD SUCCESS  REQUEST LOAD FAIL      REQUEST LOAD       REQUEST LOAD SUCCESS       REQUEST LOAD FAIL    export function someAction         return  dispatch  getState    gt            const               items             getState   otherReducer          dispatch               type  REQUEST LOAD              loading  true                       ajax  url                 success   data    gt                    dispatch                       type  REQUEST LOAD SUCCESS                      loading  false                      data  data                                                error   error    gt                    dispatch                       type  REQUEST LOAD FAIL                      loading  false                      error  error                                                        Note  you need redux-thunk to return function in action creator

User · Answer

I would like to point out that it is not that bad to read from the store -- it might be just much more convenient to decide what should be done based on the store  than to pass everything to the component and then as a parameter of a function  I agree with Dan completely  that it is much better not to use store as a singletone  unless you are 100  sure that you will use only for client-side rendering  otherwise hard to trace bugs might appear    I have created a library recently to deal with verbosity of redux  and I think it is a good idea to put everything in the middleware  so you have everyhing as a dependency injection   So  your example will look like that   import   createSyncTile   from  redux-tiles    const someTile   createSyncTile     type    some    tile      fn     params  selectors  getState      gt        return         data  params data        items  selectors another tile getState                      However  as you can see  we don t really modify data here  so there is a good chance that we can just use this selector in other place to combine it somewhere else

User · Answer

There are differing opinions on whether accessing state in action creators is a good idea    Redux creator Dan Abramov feels that it should be limited   The few use cases where I think it   s acceptable is for checking cached data before you make a request  or for checking whether you are authenticated  in other words  doing a conditional dispatch   I think that passing data such as state something items in an action creator is definitely an anti-pattern and is discouraged because it obscured the change history  if there is a bug and items are incorrect  it is hard to trace where those incorrect values come from because they are already part of the action  rather than directly computed by a reducer in response to an action  So do this with care   Current Redux maintainer Mark Erikson says it s fine and even encouraged to use getState in thunks - that s why it exists   He discusses the pros and cons of accessing state in action creators in his blog post Idiomatic Redux  Thoughts on Thunks  Sagas  Abstraction  and Reusability    If you find that you need this  both approaches you suggested are fine  The first approach does not require any middleware   import store from     store    export const SOME ACTION    SOME ACTION   export function someAction       return       type  SOME ACTION      items  store getState   otherReducer items          However you can see that it relies on store being a singleton exported from some module  We don   t recommend that because it makes it much harder to add server rendering to your app because in most cases on the server you   ll want to have a separate store per request  So while technically this approach works  we don   t recommend exporting a store from a module   This is why we recommend the second approach   export const SOME ACTION    SOME ACTION   export function someAction       return  dispatch  getState    gt        const  items    getState   otherReducer       dispatch anotherAction items            It would require you to use Redux Thunk middleware but it works fine both on the client and on the server  You can read more about Redux Thunk and why it   s necessary in this case here   Ideally  your actions should not be    fat    and should contain as little information as possible  but you should feel free to do what works best for you in your own application   The Redux FAQ has information on splitting logic between action creators and reducers and times when it may be useful to use getState in an action creator

User · Answer

I wouldn t access state in the Action Creator  I would use mapStateToProps   and import the entire state object and import a combinedReducer file  or import   from    reducers    in the component the Action Creator is eventually going to  Then use destructuring in the component to use whatever you need from the state prop  If the Action Creator is passing the state onto a Reducer for the given TYPE  you don t need to mention state because the reducer has access to everything that is currently set in state  Your example is not updating anything  I would only use the Action Creator to pass along state from its parameters  In the reducer do something like  const state   this state  const apple   this state apples   If you need to perform an action on state for the TYPE you are referencing  please do it in the reducer  Please correct me if I m wrong

User · Answer

Presenting an alternative way of solving this  This may be better or worse than Dan s solution  depending on your application   You can get the state from the reducers into the actions by splitting the action in 2 separate functions  first ask for the data  second act on the data  You can do that by using redux-loop   First  kindly ask for the data   export const SOME ACTION    SOME ACTION   export function someAction         return           type  SOME ACTION            In the reducer  intercept the ask and provide the data to the second stage action by using redux-loop   import   loop  Cmd   from  redux-loop   const initialState     data       export default  state initialState  action    gt        switch action type            case SOME ACTION                return loop state  Cmd action anotherAction state data                       With the data in hand  do whatever you initially wanted  export const ANOTHER ACTION    ANOTHER ACTION   export function anotherAction data        return           type  ANOTHER ACTION          payload  data            Hope this helps someone

[javascript] Accessing Redux state in an action creator?

Examples related to javascript

Examples related to redux