react-redux-subscribe
v1.6.1
Published
React-state and redux-sotre data binding
Downloads
6
Maintainers
Readme
react-redux-subscribe
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>}
}