4 ms·
I've recently tried using Redux for a side-project. While it solves the problem (organizing state), I feel there is too much boilerplate for my small project.
by warp 7y ago
I've recently tried using Redux for a side-project. While it solves the problem (organizing state), I feel there is too much boilerplate for my small project.
Are there any popular alternatives which don't use reducers?
EDIT: thanks for all the responses, I'll check them out :)
- thekemkid 7y agohooks and the context api are great for small projects. Check out the hooks comparison section in the linked article to understand how it might fit your app. It references other good resources, too.
- eropple 7y agoThere's stuff like MobX, but much of the point of Redux is the reducer step. You may be happy with just using hooks, though.
- tarcon 7y agoYou can use a React Context and have simple global state in your React app. If you like reducers, throw in a useReducer hook and you have a large part of what people use Redux for.
- bufferoverflow 7y agoI've done that recently, and I had many performance issues. I have a long-ish list of very simple components that are in a sorted order. So when I change the value of one, I re-sort the list. I was hoping React would only rerender the changed items (remove old, insert new). But no, it rerenders the whole list, which takes 500ms. I made sure object references in the list stay the same, that didn't help. I can implement this thing in vanilla JS, and it would not take more than a few milliseconds. React is cool, but so damn hard to optimize.
- acemarke 7y agoIt's important to distinguish between React "rendering" (asking components what they want the UI to look like), and actually applying updates to the DOM. React's default behavior is that when a component renders, React will recursively re-render _all_ of its descendants. it then diffs the VDOM render output to see if you've asked for any changes to the UI since the last time it updated. If the two VDOM trees are the same, React says "nope, nothing to do here!", and ends the render pass. _If_ you requested changes, it then gathers them up and applies them all to the DOM in one step. You can optimize the rendering behavior in some ways if needed. The `React.memo()`, `PureComponent`, and `shouldComponentUpdate` APIs [0] allow you to tell React to skip re-rendering if you know that a component's props haven't meaningfully changed, and thus would result in the same UI output as the last time. This does require that the child components be separate component types (ie, `<MyComponent />`), not just the parent rendering a bunch of plain elements (like `<div>`). For lists in particular, React needs to know how to identify which items are which. React doesn't care about object references, but you can pass a special prop called a `key` when rendering items in a list. That way, if you move a list item up, swap a couple others, delete one, and add a couple more, React knows what existing list items ended up where, and can update the DOM efficiently in response. Otherwise, changes to lists without good use of keys can result in more DOM work being done than actually necessary. [0] https://reactjs.org/docs/react-api.html#reactmemo https://reactjs.org/docs/react-api.html#reactmemo [1] https://reactjs.org/docs/lists-and-keys.html https://reactjs.org/docs/lists-and-keys.html
- FlorianRappl 7y agoThere are some which require less boilerplate and actually are (partially significantly) smaller in size. https://github.com/jamiebuilds/unstated https://github.com/jamiebuilds/unstated https://github.com/dai-shi/react-tracked https://github.com/dai-shi/react-tracked https://github.com/react-spring/zustand https://github.com/react-spring/zustand https://github.com/diegohaz/constate https://github.com/diegohaz/constate (there are more, but these may be among the most popular) You can find a comparison (and more) here: https://github.com/dai-shi/lets-compare-global-state-with-react-hooks https://github.com/dai-shi/lets-compare-global-state-with-re...
- l1ambda 7y agoThe Reducks pattern https://github.com/erikras/ducks-modular-redux https://github.com/erikras/ducks-modular-redux fixes the boilterplate problem by keeping your action types, action creators, and reducers in the same file.
- SaltyBackendGuy 7y agoI had a similar problem when I started using Redux for a side project. If it's a simple enough app (as mine was) try https://www.npmjs.com/package/unstated https://www.npmjs.com/package/unstated. I am not a React expert but this was super simple and easy to get up and running with. [No affiliation with the project]
- sergiotapia 7y agoUse mobx! It's 5% of the code you would have to write using redux and their gigantic box of tools.
- reflectiv 7y agoAlso check out mobx-state-tree...made by the same people and more suited towards large applications. I personally love mobx-state-tree (and mobx!). I really wish more would not jump straight for redux/etc without giving the powerful abstraction of observables via mobx a shot.
- doomguyfromhell 7y agoYes, mobx state tree is great and should be use more frequently.
- dointheatl 7y agoI've recently had success using https://github.com/rematch/rematch https://github.com/rematch/rematch for a small project. Significantly less boilerplate, though admittedly the documentation is a bit sparse.
- rareba 7y agoRedux Toolkit https://github.com/reduxjs/redux-toolkit https://github.com/reduxjs/redux-toolkit solved the problem of having too much boilerplate for me. Slices also make it organizing state a breeze.
- gunn 7y agoTry mine! https://github.com/gunn/pure-store https://github.com/gunn/pure-store Super simple, 100% test coverage, 100% typesafe if using typescript, absolutely no boilerplate.
- runawaybottle 7y agoEdit: Just checked out the code. This really looks like an event emitter with Immer. Is that fair to say? I totally dig the simplicity of it.