Hacker News Reader

Comment by kasbah | Hacker News Reader

The only bit of Redux I actually use is `createStore`, `store.dispatch`, `store.getState` and `store.subscribe` but it seems stupidly simple to me. I sometimes start re-implementing a bit of it rather than pull a dependency in or if I am working in a language that doesn't have it as a library.

This "Redux in a nutshell" implementation might illustrate better what I mean: https://gist.github.com/MarcoWorms/30758235f05faec844b8c06ce...

React-Redux does seem to complicate things for no reason. I have just been using plain Redux with React because I didn't want to learn it.

View on HN

Ah... out of curiosity, what about React-Redux seems complex?

Quick summary:

- Wrap your component tree in <Provider store={store>

- For any component that needs to access data or dispatch actions, use `connect()(MyComponent)` to create a wrapped-up version.

- Write a function known as "mapStateToProps", and pass it as the first argument to `connect()`. It will be called every time an action is dispatched, and given the latest store state. Extract whatever pieces of data this component needs, return them, and they become props for the wrapped component.

Dan Abramov wrote a miniature version of `connect` , which shows the basic approach it uses: https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba...

I guess I just don't understand the "why" so I am not motivated to look into it properly and at first glance it's introducing loads of new concepts. Maybe as my apps get more complicated I'll outgrow it but just plain Redux seems fine for me at the moment.

The hands down best reason to use react-redux is because if you use `mapStateToProps` and `mapDispatchToProps` you can keep your connected components 100% dumb (I like to export both the dumb version and the connected as the default). This way, when using something like react storybooks or and in your tests you don't have to mock your whole the redux world.

It's really not that complicated, conceptually.

Any code that wants to know when an action is dispatched needs to call `store.subscribe(someCallback)`. The `connect()` function generates wrapper components that manage that process for you, use your `mapState` callback to extract data from the store, and only re-render your "real" component when that data has changed (thanks to a _lot_ of optimization work).

Without `connect()`, you have to manage the store subscription process yourself. More code, fewer optimizations.

I introduced Redux into an app with an older version of React, and instead of updating decided to reimplement the important parts of `react-redux` as a shim. Didn't take long, and it was a satisfying education.

Reply on news.ycombinator.com