README
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? :)