javascript - Why getting an error: 'should not push route with duplicated key' with NavigationStateUtils in React Native? -

in react native + redux, have following reducer set navigation using navigationstateutils:

import { push_route, pop_route } '../constants/actiontypes' import { navigationexperimental } 'react-native'  import login '../components/login'  const {   stateutils: navigationstateutils } = navigationexperimental  const initialstate = {   index: 0,   key: 'root',   routes: [{    key: 'login',    title: 'login',    component: login   }] }  function navigationstate (state = initialstate, action) {   switch(action.type) {      case push_route:       if (state.routes[state.index].key === (action.route && action.route.key)) return state     return navigationstateutils.push(state, action.route)      case pop_route:       if (state.index === 0 || state.routes.length === 1) return state       return navigationstateutils.pop(state)     default:      return state    } }  export default navigationstate 

and got button component calls on navigation actions so:

  _handlebackaction() {     if (this.props.navigation.index === 0) {       return false     }     this.props.poproute()     return true   }    _handlenavigate(action) {     switch (action && action.type) {       case 'push':         this.props.pushroute(action.route)         return true       case 'back':       case 'pop':         return this._handlebackaction()       default:         return false     }   }    render(){     const route = {       type: 'push',       route: {         key: this.props.navkey,         title: this.props.pagename,         component: this.props.componentname       }     }      return(       <touchablehighlight onpress={() => this._handlenavigate(route)}>         <text style={styles}>{pr.pagename}</text>       </touchablehighlight>     ) 

the first time press button, navigates , there no error. when press button again, following error: should not push route duplicated key.

how resolve issue implemented in reducer using navigationstateutils?

thank in advance!

you have modify reducer push. need is-

1. check if key route have push exist in stack.
2. if doesn't push route in stack
3. if present find index , make clone of existing state doesn't contain duplicate route.

4. now have update state cloned state.

    case push_route:{        // trying push route are, no need change thing           if (state.routes[state.index].key === (action.route && action.route.key))               return state;       // ensure no duplicate keys           const index = state.routes.findindex((route) => {           return action.route.key === route.key && action.route.title ===route.title;          });           if (index > -1) {                    const clonedstate = object.assign({}, state);                    clonedstate.routes.splice(index, 1);                    return navigationstateutils.push(clonedstate, action.route);                    }        // normal case push              return navigationstateutils.push(state, action.route); 

   }