React Simple Setup based on @SharifsBeat sample code
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babelrc
.gitignore
Readme.md
app.js
comp.js
env.js
favicon.ico
home.js
index.html
index.js
package.json
reducer.js
yarn.lock

Readme.md

react-sb-simple-setup

Example repo of a redux-like example app using the state on the root component as "store"

All started from a tweet from @sharifsbeat : https://twitter.com/makevoid/status/949284482221264896

I liked the idea a lot! I like simple stuff for simple apps, probably it's not worth going full-redux for small apps. I wanted to keep this setup:

  • keep root component setState() for manipulating a single global state/store, keep update() as "dispatch" function

Then on top of it the following "improvements":

  • pass props to child component normally when it makes sense
  • pass store (root component state) to child object via context
  • pass "dispatch" function to all child objects via context

I don't like the overhead of mapStateToProps for every component. I know context can conflict with third party libraries but it's a risk I want to take for small apps.

OK, this works, it's a bit strange because I used parceljs (which is an interesting alternative to webpack/rollup btw) but also because I'm binding the setState App instance on the App prototype. Other than that I'm pretty happy with the results. I won't use it for big apps but for small apps and prototypes I think it makes sense. If you know any way to improve this please @me on twitter or fork the repo :) .

Notes:

  • App is the main component (app.js)
  • Home is an example of a child component (home.js)
  • reducer.js contains the reducer function
  • Comp is the component to propagate the context (comp.js)

personal note: I like parcel.js but I fill strange using async/await for importing other files, ok for performance/lazy loading reasons but it feels overcomplicated to me.