Redux Vanilla
🍨Zero Abstraction React Redux binding library
⚠️ Disclaimer
Don't use in production, this is a experimental package.
Why
- for my experiment of development npm
- I wanted to know how to work react-redux through reinventing the wheel
- I wanted to get raw Redux store in React Component
Motivation
if you use react-redux already, you can do almost exacty the same with:
connect((store) => store)(Component);
thanks reactiflux community!
Redux Vanilla
provide primitive Redux store object and state/dispatch short hand as a props.
you can feel free access raw store as well as counter-vanilla in redux official repository.
{ const store state dispatch = thisprops return <div> <p>storecount</p> <button onClick= store /> <p>statecount</p> <button onClick= /> </div> }
this means you can get a raw Redux from props.🎉
Install
- reuqirement:
react
redux
yarn add react redux redux-vanilla
Usage
index.js
const initialState = upVote: 0 downVote: 0 const reducer = { } const store = // 1. SetUp Provider with Redux storeReactDOM
App/index.js
{ // 3. receive raw Redux store & state/dispatch shorthand. enjoy! const store state dispatch = thisprops return <Container> <Header /> <Row> <Text red>stateupVote</Text> <Text green>storedownVote</Text> </Row> <Row> <Button onClick= > + UpVote </Button> <Button onClick= store> + DownVote </Button> </Row> <Footer /> </Container> } // 2. connect to React ComponentApp
the repository contain example and published Live Demo💻
you could see redux-devtools chrome extention on the page.
API
<Provider store={Store>} />
use as Parent Component against connect Component.
store
only accept redux createStore()
return Object.
also can't work without store props.
const store = ReactDOM
connect(component: ComponentType<any>)
connected Component will recive following three props.
store
: Redux store object created bycreateStore()
.state
:store.getState()
short hand, it doesn't any customize byRedux Vanilla
dispatch
:store.dispatch
short hand, it doesn't any customize byRedux Vanilla
{ const store state dispatch = thisprops return <div> // raw <p>storecount</p> <button onClick= store /> // short hand <p>statecount</p> <button onClick= /> </div> }
Inspiration
Contributors
Thanks goes to these wonderful people (emoji key):
ryota-murakami 💻 📖 ⚠️ |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT