React redux notify rematch issue

292 Views Asked by At

Having trouble rendering Notify (notification component that is triggered onClick) component using rematch: redux framework to build store from models. dispatch(createNotification(config)) is being trigger but its not updating the state. Any idea why? My guess is the rematch framework not binding notifyReducer correctly. In redux devtools this is what I get:

Action:

ADD_NOTIFICATION // action being dispatched
type(pin): "ADD_NOTIFICATION"
notification: 
message(pin): "THIS NOTIFICATION WORKS!"
type(pin): "SUCCESS"
duration(pin): 0
canDismiss(pin): true
icon: { ... }
id(pin): 1537900315811

State:

Notifications: [] // not being updated when ADD_NOTIFICATIONS triggers

models/notifications.js

import notifyReducer from 'react-redux-notify'

export default {
  state: [],
  reducers: { notifyReducer },
}

store.js

import { init } from '@rematch/core'
import notifications as models from './models'

const store = init({ models })

export default store

Containers/ExampleComponentContainer.js

import { connect } from 'react-redux'
import { createNotification } from 'react-redux-notify'
import ExampleComponent from '../../components/ExampleComponent'
import store from '../../store'

const { dispatch } = store

const mapStateToProps = ({ notifications }) => ({ notifications })

const mapDispatchToProps = ({}) => ({
  createNotification: config => {
    dispatch(createNotification(config))
  },
})

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ExampleComponent)

Components/ExampleComponent

import { Notify, NOTIFICATION_TYPE_SUCCESS } from 'react-redux-notify';

class ExampleComponent extends React.Component {
  successNotification = {
   message: 'IT WORKS!',
   type: NOTIFICATION_TYPE_SUCCESS,
   duration: 0,
   canDismiss: true,
   icon: <i className="fa fa-check" />
  }
   handleClick = () => {
    const {createNotification} = this.props;
    createNotification(mySuccessNotification);
  }

  render(){
    return (
      <div>
        <Notify />
        <button onClick={this.handleClick()}>Dispatch Notification! 
        </button>
      </div>
    )
  }
}
0

There are 0 best solutions below