0

The title may not clear enough, please consider this example:

If I have a data table, which you can select multiple rows, and click action button like delete.

now in my actions.js:
(selectedRows is an array that contains the row indexes, getSelectedPostIds is a selector which will fetch and convert selectedRows to postIds)

import { getSelectedPostIds } from 'selectors'

export const deletePosts = () => (dispatch, getState) => {
  // encapsulate the parameter `postIds` in action
  const postIds = getSelectedPostIds(getState())
  dispatch({ type: 'DELETE' })
  deletePostsApi(postIds)
  // .then(...)
  // .catch(...)
}

is there any problem in this design? Or I should avoid using getState in an action and just pass postIds as a parameter to the action:

export const deletePosts = postIds => dispatch => {
  dispatch({ type: 'DELETE' })
  deletePostsApi(postIds)
  // .then(...)
  // .catch(...)
}

The only difference is that who should fetch the state (use the selector) from store, 1. action or 2. the component who will dispatch the action (via mapStateToProps).

I'm not sure about the approach 1, and the approach 2 will make my component contains a lot of props just because some actions need them (or maybe this is totally fine?).

thanks.

GG.
  • 21,083
  • 14
  • 84
  • 130
CodinCat
  • 15,530
  • 5
  • 49
  • 60

2 Answers2

2

This might be a matter of taste. I usually like to access getState directly since, as you point out, avoids passing a lot of props. And by doing that the action is easier to integrate in different components (I just need to call it instead of additionally editing the mapStateToProps). Also, since in the end both ways are accessing the global store, the intended redux data flow is not compromised in any way.

martinarroyo
  • 9,389
  • 3
  • 38
  • 75
  • But I just found that Dan said that accessing state in action creator is an anti-pattern, http://stackoverflow.com/questions/35667249/accessing-redux-state-in-an-action-creator , but I'm still not sure about why. – CodinCat Dec 21 '16 at 10:00
  • 2
    Mmm... I actually use it mostly for user authentication, the case that Dan mentions as an exception. I guess then I would say try to find a compromise between lots of props and store access. – martinarroyo Dec 21 '16 at 10:09
  • 1
    @CodinCat : That answer from Dan frequently pops up as a concern for people. I'm actually writing a blog post now that disagrees with Dan's statement, along with several other complaints about use of thunks. It'll go up on my blog at http://blog.isquaredsoftware.com once I figure out exactly what I want to say. But yeah, feel free to go ahead and access `getState` as needed – markerikson Dec 21 '16 at 18:19
0

You can use redux-thunk if you want to work with state in your action creators. :)

https://github.com/gaearon/redux-thunk

function yourActionCreator() {
  // Redux-thunk will catch all action creators that return functions
  return (dispatch, getState) => {
    // u can use state here
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }
    // Dispatch your action creator as you would normally do
    dispatch(increment());
  };
}
Michal
  • 4,952
  • 8
  • 30
  • 63