CODEWITHSUNDEEP
reduxreact-redux
machineghost
machineghost

Reputation: 35790

Why Not "pre-connect" Redux Action Creators?

In a typical React/Redux codebase you have action creator functions like:

Actions.js:

export const addFoo = foo => ({ foo, type: 'ADD_FOO' });

Then you use connect to create a version of that function which dispatches the action, and make it available to a component:

Component.js:

import { addFoo } from 'Actions';
const mapPropsToDispatch = { addFoo };
const SomeComponent = connect(mapStateToProps, mapPropsToDispatch)(
  ({ addFoo }) =>
      <button onClick={() => addFoo(5)}>Add Five</button>;
)

I was thinking, rather than mapping each action creator to its dispatched version inside the connect of every component that uses them, wouldn't it be simpler and cleaner if you could just "pre-connect" all of your action creators ahead of time:

Store.js:

import { createStore } from 'redux'
const store = createStore(reducer, initialState);
export const preConnect = func => (...args) => store.dispatch(func(...args));

Actions.js (2.0):

import { preConnect } from 'Store';
export const addFoo = preConnect(foo => ({ foo, type: 'ADD_FOO' }));

Component.js (2.0):

import { addFoo } from 'Actions';

const SomeComponent = () =>
   <button onClick={() => addFoo(5)}>A Button</button>;

Am I missing any obvious reason why doing this would be a bad idea?

Upvotes: 3

Views: 61

Answers (1)

Daniel
Daniel

Reputation: 15413

You make a reference to the dispatch() function in your code here:

export const preConnect = func => (...args) => store.dispatch(func(...args));

But in the world of React-Redux there is no direct reference to the dispatch() function inside of our components. So what's going on?

When we pass our action creator into the connect() function, the connect() function does a special operation on the functions inside the actions object.

export default connect(mapStateToProps, { selectSong })(SongList);

The connect() function essentially wraps the action into a new JavaScript function. When we call the new JavaScript function, the connect() function is going to automatically call our action creator, take the action that gets returned and automatically call the dispatch() function for us.

So by passing the action creator into the connect() function, whenever we call the action creator that gets added to our props object, the function is going to automatically take the action that gets returned and throw it into dispatch function for us.

All this is happening behind the scenes and you don't really have to think about it when using the connect() function.

So thats how redux works, there is a lot of wiring up and its one of the chief complaints I believe people have around this library, so I do understand your sentiment of wanting to pre-configure some of its setup and in this case, in my opinion, the toughest part of the Redux setup which is wiring up the action creators and reducers.

The problem with pre-configuring I am thinking is that the developer still needs to know how to write these functions and then manually hook them together as opposed to how its done in other state management libraries and if that is taken away by some type of pre-configuration process, Redux becomes more magical and harder to troubleshoot I think. Again the action creators and reducers are the biggest challenge in putting together a Redux architecture and so mastering and knowing how to troubleshoot that area almost requires manual setup to do so.

Upvotes: 2

Related Questions