Smalldux

A small implementation of react-redux using the Context API. The API is almost the same.

NOTE: To use this library, make sure react and react-dom versions are equal or above 16.3.0. It will NOT work on below versions of react.

It is important to note that I've built this lib with learning/practicing purposes in mind only, so please don't use this in production! Use the official Redux or another battle-tasted flux to react inplementation!!!

Installation

yarn add smalldux

or

npm install smalldux

Usage

Define your reducers:

import { combineReducers } from 'smalldux'
 
const initialState = {
 current: 'red',
}
 
function colorReducer(state=initialState, action) {
 switch(action.type) {
   case 'CHANGE_COLOR':
     return {
       ...state,
       current: action.payload,
     }
 
   default:
     return state
 }
}
 
const reducers = combineReducers({
 color: colorReducer,
})

Then create your store:

import { createStore } from 'smalldux'
 
const store = createStore(reducers)

Append the brand new store to a Provider:

import React from 'react'
import { Provider } from 'smalldux'
 
import ShowColor from './ShowColor'
import UpdateColor from './UpdateColor'
 
class App extends React.Component {
 render() {
   return (
     <Provider store={store}>
       <ShowColor />
       <UpdateColor />
     </Provider>
   )
 }
}

You're all set! Now it's time to write some components! I'll show a basic publish-subscriber example:

ShowColor.js as our subscriber

import React from 'react'
 
import { connect } from 'smalldux'
 
class ShowColor extends React.PureComponent {
 render() {
   return (
     <div>
       Current color: {this.props.color.current}
     </div>
   )
 }
}
 
export default connect(state => ({
 color: state.color,
}))(ShowColor)

UpdateColor.js as our publisher

import React from 'react'
 
import { connect } from 'smalldux'
 
class UpdateColor extends React.PureComponent {
 constructor(props) {
   super(props)
 
   this.handleTextChange = this.handleTextChange.bind(this)
 }
 
 handleTextChange({ nativeEvent }) {
   this.props.dispatch({
     type: 'CHANGE_COLOR',
     payload: nativeEvent.srcElement.value
   })
 }
 
 render() {
   return (
     <p>
       Type your favorite color:
       {' '}
       <input
         type="text"
         onChange={this.handleTextChange}
       />
     </p>
   )
 }
}
 
export default connect(null)(UpdateColor)

Surely the publisher can also be a subscriber and vice-versa. Purely examples!

TODO

• mapDispatchToProps
• combineReducers that actually combine all reducers into one
• initial state
• middlewares implementation

Feel free to open issues and submit PRs if you like to! Primarily I made this little project on practicing purposes, but who knows? :)