Use with React-Redux

Objective Redux is fully compatible with React-Redux. Just instantiate the ObjectiveStore and pass it as the store for the React-Redux provider.

import React from 'react';
import ReactDOM from 'react-dom';
import { ObjectiveStoreProvider, ObjectiveStore } from 'objective-redux';
import { Provider } from 'react-redux';

export const objectiveStore = new ObjectiveStore();

ReactDOM.render(
  <ObjectiveStoreProvider objectiveStore={objectiveStore}>
    <Provider store={objectiveStore}>
      // Your components here
    </Provider>
  </ObjectiveStoreProvider>,
  document.getElementById('root')
);  

There's nothing special after that—the components can still be connected in the same way, as shown below.

  import React from 'react';
  import { connect } from 'react-redux';
  
  function ReactReduxComponent(props) {
    const { isOn } = props;
  
    return(
      <button>
        Turn { isOn ? 'Off' : 'On' }
      </button>
    );
  }
  
  export default connect(
    (state, ownProps) => ({
      ...ownProps,
      ...state['switch']
    })
  )(ReactReduxComponent);
  

To fire events to Objective Redux, use the createAction and getActionNameForController helper functions. Make sure that actions have a name set using the withAddressableName method. See the code splitting topic for more.

import React from 'react';
import { connect } from 'react-redux';
import { createAction, getActionNameForController } from 'objective-redux';

const action = createAction(getActionNameForController('switchSagas', 'update-switch'));

function ReactReduxComponent(props) {
  const { isOn, dispatch } = props;

  const sendToggleAction = () => {
    dispatch(action());
  }

  return(
    <button onClick={sendToggleAction}>
      Turn { isOn ? 'Off' : 'On' }
    </button>
  );
}

export default connect(
  (state, ownProps) => ({
    ...ownProps,
    ...state['switch']
  })
)(ReactReduxComponent);