[](https://www.npmjs.com/package/@hlhr202/redox)
npm install @hlhr202/redoxconnect` accept an option object as following format
`javascript
{
// modal is the modal name, should be unique in Provider scope.
modal: 'modalName',
// initialState is the initial state of connected component.
// It will be passed as props.
// Can either be native js object, Immutable.js object, or a function which transform its props to an object.
initialState: {
yourStateKey: yourStateValue | (props) => yourStateValue
},
// reducer is the state transform functions with return of new state
reducer: {
reducerName: (prevState, action) => nextState
},
// effects include the side effects which handle complex asynchronouse procedure
// It should return promise of action
effects: {
functionName: async() => action
}
}
`
$3
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import {connect, Provider} from '@hlhr202/redox'
import {Map} from 'immutable'
@connect({
modal: 'count',
initialState: Map({
count: 0
}),
reducer: {
inc: (state, action) => state.update('count', count => count + 1),
dec: (state, action) => state.update('count', count => count - 1)
}
})
class Counter extends React.PureComponent {
handleClick = type => {
const action = {type, modal: 'count'}
this.props.dispatch(action)
}
render() {
return (
{this.props.state.get('count')}
)
}
}
ReactDOM.render(
,
document.getElementById('root')
)
`
$3
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import {connect, Provider} from '@hlhr202/redox'
import {Map} from 'immutable'
@connect({
modal: 'App',
initialState: ({display}) => Map({display}),
reducer: {
toggle: state => state.update('display', display => !display)
}
})
class Toggle extends React.PureComponent {
handleClick = () => this.props.dispatch({modal: 'App', type: 'toggle'})
render() {
return (
{this.props.state.get('display') && Toggled!}
)
}
}
ReactDOM.render(
,
document.getElementById('root')
)
`
$3
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import {connect, Provider} from '@hlhr202/redox'
import {Map} from 'immutable'
@connect({
modal: 'Article',
initialState: Map({
id: 0,
body: '',
title: ''
}),
reducer: {
fetch: (state, action) => {
const {payload: {body, id, title}} = action
return state.set('id', id).set('body', body).set('title', title)
}
}
effects: {
fetchData: async() => {
const myFetch = await fetch('https://jsonplaceholder.typicode.com/posts/1')
const json = await myFetch.json()
return {
modal: 'Article',
type: 'fetch',
payload: json
}
}
}
})
class Effect extends React.PureComponent {
render() {
return (
title: {this.props.state.get('title')}
id: {this.props.state.get('id')}
body: {this.props.state.get('body')}
)
}
}
ReactDOM.render(
,
document.getElementById('root')
)
``