0

I need help designing a simple app which allows user to rate videos using a form. My state is composed by 2 reducers, one that holds data about all ratable videos (in a normalized fashion) and another one that holds the form state:

{
  videos: {
    'video1Id': { id: 'video1Id', title: 'Cat video', duration: 120, ... },
    'video2Id': { ... },
    ...
  },
  rateForm: {
    'videoId': 'video1Id'
    'userComment: 'A nice video about cat'
    'formSubmitted': false
    ...
  }
}

Note that, inside rateForm, I reference the video id instead of the video object. Problem is, how can I retreive the whole video object from my rateForm reducer ?

I feel like I'm following the best practice of Redux design but I'm stuck at this really simple use case. Any help appreciated.

Thanks

htulipe
  • 1,575
  • 1
  • 10
  • 22
  • Can you clarify what you mean by "retrieve the whole video object from the rateForm reducer"? When and why do you want to do that? Is it while you're updating the data in response to an action, or extracting the data for a component in a `mapState` function? – markerikson Apr 25 '17 at 15:57
  • By "whole video object" I mean `{ id: 'video1Id', title: 'Cat video', duration: 120, ... }`. I need it in my form reducer to provide my form component with it. For instance, I want to display the video title in the form. – htulipe Apr 26 '17 at 08:02
  • 1
    Per @yujingz 's question - are you asking about getting that value in a _reducer function_ or retrieving it for use in a _component_? If you're asking about getting it in the component, you'd look it up in your `mapState` function using the ID: `const video = state.videos[state.rateForm.videoId]; return {video};`. – markerikson Apr 26 '17 at 15:47
  • I'm looking to get it into a reducer more than in a component @markerikson – htulipe May 04 '17 at 08:59
  • 1
    Sounds like you're maybe asking this question: [Redux FAQ: How do I share state between two reducers?](http://redux.js.org/docs/faq/Reducers.html#reducers-share-state). – markerikson May 04 '17 at 16:01
  • Hi, I know this question is very old, but if you still practice normalization in reducers try using: https://github.com/brietsparks/normalized-reducer – brietsparks Apr 21 '20 at 02:54

1 Answers1

1

One thing to remember, reducer should be AS SIMPLE AS POSSIBLE. Only doing atomic operations on reducer level. From what I can tell you trying to retrieve the whole video object in your reducer just doesn't sound right.

Depending on your needs, usually, you don't need to fetch the whole video object if you just want to comment on it or rate it. But if you are 100% sure you have to, A good place to do this is in your action. Using Redux-Thunk, you will have access to the whole state object before you return your thunk. Example

function doSomethingToVideo (videoId, something) {
  return (dispatch, getState) => {
    const video = getState().videos[videoId]
    // Do what ever 
    return somethingElse
  }
}

Reference: Redux author's answer on a similar matter.

Accessing Redux state in an action creator?

Community
  • 1
  • 1
yujingz
  • 2,271
  • 1
  • 25
  • 29
  • Thanks for the answer, I agree on the reducer simplicity philosophy. Reading Dan's answer, the thunk solution seems to be an anti-pattern too. I'm puzzled by the fact that my use case seems simple but yet can't be achieved without anti-pattern coding. Maybe my state design is wrong. – htulipe Apr 26 '17 at 09:53
  • Can you describe a little bit more what you want to achieve? Like comment on a video or rate on a video – yujingz Apr 26 '17 at 15:20
  • 2
    It looks like you just want to show the video information in your rateForm page? If that's the case you can just map your state from your rateFrom container. See container: http://redux.js.org/docs/basics/UsageWithReact.html – yujingz Apr 26 '17 at 15:27
  • I responded to Dan's comment about "`getState` in a thunk is an anti-pattern" in my blog post [Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability](http://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/). TL;DR: Dan overstated things , that's confused a lot of people, using thunks isn't bad, accessing state in thunks isn't bad. – markerikson Apr 26 '17 at 15:44
  • Also, reducers do _not_ have to be "as simple as possible". It's totally fine to have very complex reducer logic, as long as it ultimately applies the updates in an immutable fashion. – markerikson Apr 26 '17 at 15:45
  • I will have to read your writings later. Also `As simple as possible` doesn't conflict your `very complex reducer logic` point. As long as that logic is necessary I am perfectly fine with that. Gonna read your write up and comment over there. – yujingz Apr 26 '17 at 16:10
  • @yujingz you're right but my actual use case (I took a example in my question, a bad one indeed) needs the video to get to the reducer. – htulipe May 04 '17 at 09:01