Get Start with redux-bind

[sorrycc]

// 1. import dependencies
import { createBind, reducer, middleware } from 'redux-bind';

// 2. create store with middleware and reducer
const store = applyMiddleware(middleware)(createStore)(combineReducers({
  bind: reducer,
}));

// 3. create bind component
const FileUploadModal = createBind('Modal', {
  id: 'uploadFileModal',  // 指定唯一 id，可选
  fields: ['visible'],    // 指定绑到 store 里的属性
})(Modal);

// 4. use component
render() {
  return <FileUploadModal />;       // 不需要重复配置已绑定到 store 里的属性
}

// 5.1 update component state
dispatch({
  type: 'redux-bind',
  id: 'uploadFileModal',
  payload: { visible: true },
});

// 5.2 update component state with function
dispatch({
  type: 'redux-bind',
  id: 'uploadFileModal',
  payload: { visible: (v) => !v },
});

// 5.3 update component state with action creator helper
this.props.updateReduxBind({
  id: 'uploadFileModal',
  payload: { visible: true },
});