javascript - Adding functions to redux store within reducer is an anti pattern? - Stack Overflow

admin管理员组

文章数量:1391989

say I have a ponent connected to the redux store. Within this store, there's a list of objects. For instance something like this:

ReduxStore: {
    dataList: [
      {name:'bla'},
      {name:'blub'},
    ]
}

Is it actually an anti pattern to create and add a filter function within the reducer to create something like this:

ReduxStore: {
   dataList: {
     data:[
      {name:'bla'},
      {name:'blub'}
     ],
     isNameAvailable: (name) => {/* search for name */}
   }
}

It works great, but I'm not sure whether this was the intended way to go.

say I have a ponent connected to the redux store. Within this store, there's a list of objects. For instance something like this:

ReduxStore: {
    dataList: [
      {name:'bla'},
      {name:'blub'},
    ]
}

Is it actually an anti pattern to create and add a filter function within the reducer to create something like this:

ReduxStore: {
   dataList: {
     data:[
      {name:'bla'},
      {name:'blub'}
     ],
     isNameAvailable: (name) => {/* search for name */}
   }
}

It works great, but I'm not sure whether this was the intended way to go.

• javascript
• reactjs
• redux

Share Improve this question Follow edited Jul 7, 2016 at 9:16 U r s u s 6,9981212 gold badges5353 silver badges8888 bronze badges asked Jul 7, 2016 at 9:11 ChristianChristian 7,4291212 gold badges5757 silver badges9090 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It's an anti-pattern because your store only cares about data, not putation. Once you start adding functions to your store, you lose the ability to serialize the data inside it.

However, it's pretty trivial to pull these kinds of helper functions out and turn them into standalone utility selectors which you can use to achieve the same thing.

function isNameAvailable(store, name) {
  /* search for `name` in `store` */
}

Now the function works independently of the store and you can keep them separate for testing.

From here, you can take a look at Reselect which allows you to turn your isNameAvailable function into a cached selector, meaning you'll only need to re-calculate as and when the appropriate data in the store is changed.

From Redux documentation:

It’s very important that the reducer stays pure. Things you should never do inside a reducer:

• Mutate its arguments;
• Perform side effects like API calls and routing transitions;
• Call non-pure functions, e.g. Date.now() or Math.random().

so I think if you want to declare a filter function isNameAvailable, in my opinion, you have two options:

• use the connect function to filter

  // the solution of connect 
  
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  const App = () => (
    <div>the example</div>
  );
  
  function isNameAvailable(state) {
    // your code
  }
  
  function mapStateToProps(state) {
    return isNameAvailable(state)
  }
  
  module.exports = connect(mapStateToProps)(App);
  

• declare a filter function in action

In my experience，I think the first one is better. I hope this can help you.

本文标签： javascriptAdding functions to redux store within reducer is an anti patternStack Overflow