CODEWITHSUNDEEP
react-nativeredux
highdimensionalbiology
highdimensionalbiology

Reputation: 13

React Native Redux store dispatches reducers correctly, but doesn't update UI component

Working on a cancer treatment app in react native:

Current functionality: when I move the sliders and change the date on my app, it dispatches changes to the redux store successfully. Unfortunately, my UI doesn't update, even though I am calling the same store from the presentational components that I called for dispatch.

That results in this: GIF of redux store changing while UI is static

Printing via 

store.getState();
store.subscribe(() =>
  console.log(store.getState())
);

I tried using subscription, but it seems like this isn't the right way to go about this. Thoughts?

snippets from my code (all in one small file, linked below)

Action

//action
function set_num_treatments(num) {
  return {
    type: SET_NUM_TREATMENTS,
    num: num
  }
}

setting the title

SET_NUM_TREATMENTS = "SET_NUM_TREATMENTS"

main reducer

function main_reducer(state = initialState, action) {
  switch (action.type) {
    case SET_PAGE_VIEW:
      return Object.assign({}, state, {
        current_page: action.page_of_interest
      })
    case SET_NUM_TREATMENTS:
      return Object.assign({}, state, {
        num_treatments: action.num
      })
    case SET_INTER_TREATMENT_INTERVAL:
      return Object.assign({}, state, {
        inter_treatment_interval: action.weeks_between_treatments
      })
    case SET_TREATMENT_START_DATE:
      return Object.assign({}, state, {
        treatment_start_date: action.date
      })
    default:
      return state
  }
  return state
}

Here's where I start the store & produce the printing functionality

let store = createStore(main_reducer);
store.getState();
store.subscribe(() =>
console.log(store.getState())
);

here's the presentational components

class TreatmentSettings extends React.Component {
  constructor(props){
    super(props)
  }
  render() {
    const props = this.props
    const {store} = props
    const state = store.getState()
    return(
      <View style={styles.treatment_option_slider_card}>
      <Text style={styles.my_font, styles.tx_settings_header}>{state.num_treatments} Treatments</Text>
      <Slider step={1} minimumValue={1} maximumValue={20} value={12}
              onValueChange={(num_treatments) => {store.dispatch(set_num_treatments(num_treatments))}}  />
      <Text style={styles.my_font, styles.tx_settings_header}>X Weeks Between Treatments</Text>
      <Slider step={1} minimumValue={1} maximumValue={4} value={2} style={{marginBottom:60}}
                    onValueChange={(value) => {store.dispatch(set_inter_treatment_interval(value))}}
                    />
      </View>
    )
  }
}

These final two components hold the main containers for the app

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Provider store={createStore(main_reducer)}>
        <AppContainer />
      </Provider>
    );
  }
}

class AppContainer extends React.Component {
  constructor(props){
    super(props)
  }
  render(){
    return(

          <View style={styles.container}>
            <TreatmentSettings store={store} />
            <Text>footertext</Text>
          </View>
    )
  }
}

the one gist file is here if you want to see it all: https://github.com/briancohn/learning-redux/blob/navigation_addn/App.js I really appreciate the help— Thanks in advance! -Brian

Upvotes: 0

Views: 394

Answers (1)

hyb175
hyb175

Reputation: 1291

I think the way you are updating the store is fine but there’s something wrong with how your components are listening to the changes. It seems you meant to use connect from react-redux for the containers to connect to the store. Then you can use mapStateToProps to get the data from the store to pass into the components as props. Check https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options for example.

Upvotes: 3

Related Questions