Skip to content
This repository has been archived by the owner on Aug 11, 2023. It is now read-only.
/ redux-vanilla Public archive

[Unmaintained] 🍨 Zero Abstraction React Redux binding library

License

Notifications You must be signed in to change notification settings

laststance/redux-vanilla

Repository files navigation

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 } from './layout'
import { Header, Footer, Row, Button } from './component'

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