❤
npm
Sign UpSign In

redux-vanilla

1.0.1 • Public • Published

Redux Vanilla

Redux Vanilla Logo

npm version CircleCI tested with jest code style: prettier codecov All Contributors

🍨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.

class App extends Component {
  render() {
    const { store, state, dispatch } = this.props
    return (
      <div>
 
        <p>{store.getState().count}</p>
        <button onClick={() => store.dispatch({ type: 'INCLEMENT' })} />
 
        <p>{state.count}</p>
        <button onClick={() => dispatch({ type: 'INCLEMENT' })} />
        
      </div>
    )
  }
}
 
export defaunt connect(App)

this means you can get a raw Redux from props.🎉

Install

  • reuqirement: react redux
yarn add react redux redux-vanilla

Usage

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { createStore } from 'redux'
import { Provider } from 'redux-vanilla'
 
const initialState = {
  upVote: 0,
  downVote: 0
}
 
const reducer = (state, action) => {
  switch (action.type) {
    case 'UP_VOTE':
      return { ...state, upVote: state.upVote + 1 }
    case 'DOWN_VOTE':
      return { ...state, downVote: state.downVote + 1 }
    default:
      return state
  }
}
 
const store = createStore(
  reducer,
  initialState
)
 
// 1. SetUp Provider with Redux store
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

App/index.js

import React, { Component } from 'react'
import { connect } from 'redux-vanilla'
import { Container, Secton } from './layout'
import { Header, Footer } from './component'
import { UpVoteCount, DownVoteCount, UpVoteBtn, DownVoteBtn } from './element'
 
class App extends Component {
  render() {
    // 3. receive raw Redux store & state/dispatch shorthand. enjoy!
    const { store, state, dispatch } = this.props
 
    return (
      <Container>
        <Header />
        <Row>
          <Text red>{state.upVote}</Text>
          <Text green>{store.getState().downVote}</Text>
        </Row>
        <Row>
          <Button onClick={() => dispatch({ type: 'UP_VOTE' })}>
            + UpVote
          </Button>
          <Button onClick={() => store.dispatch({ type: 'DOWN_VOTE' })}>
            + DownVote
          </Button>
        </Row>
        <Footer />
      </Container>
    )
  }
}
 
// 2. connect to React Component
export default connect(App)

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 = createStore(reducer)
 
ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById('root')
)

connect(component: ComponentType<any>)

connected Component will recive following three props.

  • store: Redux store object created by createStore().
  • state: store.getState() short hand, it doesn't any customize by Redux Vanilla
  • dispatch: store.dispatch short hand, it doesn't any customize by Redux Vanilla
class App extends Component {
  render() {
    const { store, state, dispatch } = this.props
    return (
      <div>
        // raw
        <p>{store.getState().count}</p>
        <button onClick={() => store.dispatch({ type: 'INCLEMENT' })} />
        // short hand
        <p>{state.count}</p>
        <button onClick={() => dispatch({ type: 'INCLEMENT' })} />
      </div>
    )
  }
}
 
export defaunt connect(App)

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

Readme

Keywords

none

Package Sidebar

Install

npm i redux-vanilla

Repository

github.com/ryota-murakami/redux-vanilla

Homepage

github.com/ryota-murakami/redux-vanilla#readme

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

24.9 kB

Total Files

12

Last publish

Collaborators

  • ryotamurakami
Try on RunKit
Report malware