react-redux-subscribe

React-state and redux-sotre data binding

Usage no npm install needed!

<script type="module">
  import reactReduxSubscribe from 'https://cdn.skypack.dev/react-redux-subscribe';
</script>

README

react-redux-subscribe

NPM version

1.Define storages

// redux/reducers.js
import { createStore, combineReducers } from 'redux'

// One store
export const count = createStore((state = 0, action) => {
    switch (action.type) {
        case 'IN_CREMENT':
            return state + action.data
        default:return state
    }
})

// Multiple stores
const a = (state= 0)=> state
const b = (state= 10)=> state
export const stores = createStore(combineReducers({a,b}))

2.Define actions

// redux/actions.js
export const inCrement = (number)=> { type: 'IN_CREMENT', data: number }

3.Define index

// redux/index.js
import { stateSubStore, stateSubStoreAll } from 'react-redux-subscribe'
import { count, stores } from './reducers'
import { inCrement } from './actions'

// (✪ω✪)绑定一个store
export const stateSusApp = stateSubStore({count},{inCrement})

// (;´д`)ゞ As long as store
// export const stateSusApp = storePushToState({store})

// (ಥ_ಥ) Just the actions
// export const stateSusApp = storePushToState({store,need:false},{addComment})

// storePushToState(): store No more than 2,
// But you can use redux-combineReducers and stateSubStoreAll({stores},{actions})

// o(゚Д゚)っ!Bind multiple stores
// export const stateSusApp = stateSubStoreAll({stores})

/* ψ(*`ー´)ψ Binding multiple stores and filtering
   export const stateSusApp = storePushToStateAll(
       { stores, filter:['comments'] },
       { delComment, initComment,addComment }
   )
*/

export const AppStateSus = stateSubStore({count},{inCrement})
// If you only need to change the method, you can add a need: false after the store
// storePushToState({count, need:false}, {inCrement})

// storePushToState(): store No more than 2,
// But you can use redux-combineReducers and stateSubStoreAll({stores},{actions})
export const AppStateSus2 = stateSubStoreAll({stores},{})
// storePushToStateAll's store can be filtered filter:['storename']
export const AppStateSus3 = stateSubStoreAll({stores, filter:['a']},{})

4.bind react-state in react-constructor

// components/app.jsx
import {AppStateSus} from '../redux/index.js'
class App extends Component {
    constructor(props) {
    super(props);
    
   // bind react-state
     AppStateSus(this) 
   //--> this.state.count = count
   //--> this.actions.inCrement = inCrement
   
     console.log(this.state.count) // 0
   this.actions.inCrement(6)
   // this.actions.inCrement(6)  ==> this.setState({count:6})
     console.log(this.state.count) // 6
    }
  render(){return<div></div>}
}