CODEWITHSUNDEEP
react-nativeredux
Jukka Koivu
Jukka Koivu

Reputation: 319

How can I connect slider to redux in react native?

I am trying to hook up the slider to the redux because I have added slider to the settings screen so idea behind is user to be able to use the radius in the two other screens where I am using google places api and one of the parameters is radius so I want them be able to filter change the radius with the slider. I am currently facing following error when trying to drag the slider.

error: undefined is not an object (evaluating 'e.target.value')

<Slider
          style={slider}
          trackStyle={sliderTrack}
          thumbStyle={sliderThumb}
          minimumValue={10}
          maximumValue={100}
          step={10}
          value={props.radius}
          onValueChange={(e) => props.sliderActions.sliderAction(e.target.value)}
        />
        <Text>Alue: {props.radius} km</Text> 

const mapStateToProps = (state) => ({
  radius: state.sliderReducer.radius,
});

const mapDispatchToProps = (dispatch) => ({
  sliderActions: bindActionCreators(sliderAction, dispatch),
});

this is the action file for the slider and not sure if this is part of the issue:

const SLIDER_SET_VALUE = 'SLIDER_SET_VALUE'

export const sliderAction = (value) => ({
    type: SLIDER_SET_VALUE,
    payload: value
})

Here in reducer I have set the initial value of radius to 10 which is also not showing in the text below the slider:

const SLIDER_SET_VALUE = 'SLIDER_SET_VALUE'

const initialState = {
  radius: 10,
}

const sliderValueReducer = (state = initialState, action) => {
  switch (action.type) {
    case SLIDER_SET_VALUE:
      return {
        ...state,
        radius: action.payload,
      }
    default:
      return state
  }
}

export default sliderValueReducer

and this index of reducer where I have combined the reducers to rootReducer:

import { combineReducers } from 'redux'

import { ModalReducer } from './modalReducer'
import sliderValueReducer from './sliderReducer'

// Redux: Root Reducer
const rootReducer = combineReducers({
  modalReducer: ModalReducer,
  sliderReducer: sliderValueReducer
})
// Exports
export default rootReducer

and also in my log I do receive the initial state of the radius.

LOG    %c prev state color: #9E9E9E; font-weight: bold {"modalReducer": {"id": ""}, "sliderReducer": {"radius": 10}}
LOG    %c action     color: #03A9F4; font-weight: bold {"register": [Function register], "rehydrate": [Function rehydrate], "type": "persist/PERSIST"}
LOG    %c next state color: #4CAF50; font-weight: bold {"_persist": {"rehydrated": false, "version": -1}, "modalReducer": {"id": ""}, "sliderReducer": {"radius": 10}}

Here is console log for the (e) => console.log(e)

LOG  0
 LOG  10
 LOG  10
 LOG  10
 LOG  20
 LOG  20
 LOG  20
 LOG  20
 LOG  20
 LOG  20
 LOG  20
 LOG  20
 LOG  20
 LOG  20

Upvotes: 0

Views: 120

Answers (1)

MaartenDev
MaartenDev

Reputation: 5801

The onValueChange property of the <Slider /> component only provides the new slider value. It does not provide an Event. Because of this you cannot access the e.target.value. You can however directly use the value:

<Slider
   style={slider}
   trackStyle={sliderTrack}
   thumbStyle={sliderThumb}
   minimumValue={10}
   maximumValue={100}
   step={10}
   value={props.radius}
   onValueChange={(newValue) => props.sliderActions.sliderAction(newValue)} // Use value directly
/>

Upvotes: 1

Related Questions