5 ms·
Ah... out of curiosity, what about React-Redux seems complex? Quick summary: - Wrap your component tree in <Provider store={store> - For any component that n
by acemarke 10y ago
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/1d19088790e70ac32ea636c025ba424e https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba...
- kasbah 10y agoI 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.
- adregan 10y agoThe 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.
- acemarke 10y agoIt'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.