🍨 Zero Abstraction React Redux binding library
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.
.circleci
example
flow-typed
src
.all-contributorsrc
.babelrc
.eslintrc
.flowconfig
.gitignore
LICENSE
README.md
index.d.ts
jestSetup.js
logo.png
netlify.toml
package.json
rollup.config.js
yarn.lock

README.md

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