Redux-vanilla NPM

:ice_cream: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.:tada:

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:computer:
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)