davidmfoley / react-router-modal

Simple modals for react-router 4
MIT License
153 stars 20 forks source link

Possibility of connecting the modal route component with Redux #16

Closed js2me closed 6 years ago

js2me commented 6 years ago

Its possible? Hello, I use this react-router-modal as route component of my user info modal and I have problem with connecting my component with redux. Here is my User Container code which connects as route component to ModalRoute:

export namespace User {
  export interface Props extends RouteComponentProps<void> {
    user: UserStoreState;
    actions: typeof UserActions;
  }
}
@connect(mapStateToProps, mapDispatchToProps)
export default class User extends React.Component<User.Props>{
  constructor(props){
    super(props);
  }
  render(){
    console.log(this.props.user);
    return (
      <div className='modal user'>
        <label className="user-name">LOL</label>
        <button className="close-modal-button">
          <span className='button-bar'/>
          <span className='button-bar'/>
        </button>
      </div>
    )
  }
}

function mapStateToProps(state){
    return {
        user: state.user
    }
}
function mapDispatchToProps(dispatch){
    return {
        actions: bindActionCreators(UserActions as any, dispatch)
    }
}

Displays to console: undefined...

And there I wrote ModalRoute and ModalContainer

    <ModalRoute className='user-modal' path="/user/:userId" parentPath='/search?query=Mankubus'
                    component={() => <AsyncComponent
                      moduleProvider={user}/>}/>
        <ModalContainer history={history}/>

If you will talk about AsyncComponent , its worked with my others routes :)

<Route path="/game" component={() => <AsyncComponent
     moduleProvider={playground}/>}>
</Route>
<Route path="/search" component={() => <AsyncComponent
    moduleProvider={search}/>}>
</Route>

And sorry for my bad english ))

js2me commented 6 years ago

OMG, sorry sorry ITS MY PROBLEM, Im so stupid ahahah, I forgot combine user reducer with other reducers in reducers/index.ts