React Native Redux store 正确调度 reducer，但不更新 UI 组件答案

【问题标题】：React Native Redux store dispatches reducers correctly, but doesn't update UI componentReact Native Redux store 正确调度 reducer，但不更新 UI 组件
【发布时间】：2017-12-20 07:44:15
【问题描述】：

在 React Native 中开发癌症治疗应用程序：

当前功能：当我在我的应用程序上移动滑块并更改日期时，它会成功地将更改分派到 redux 商店。不幸的是，我的 UI 没有更新，即使我从我调用调度的演示组件中调用了相同的 store。

结果如下： GIF of redux store changing while UI is static

通过打印

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

我尝试使用订阅，但似乎这不是解决此问题的正确方法。想法？

我的代码中的 sn-ps（全部在一个小文件中，链接如下）

动作

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

设置标题

SET_NUM_TREATMENTS = "SET_NUM_TREATMENTS"

主减速器

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
}

这里是我开店并生产打印功能的地方

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

这是演示组件

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>
    )
  }
}

最后两个组件保存应用程序的主要容器

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>
    )
  }
}

如果您想查看全部内容，这里有一个要点文件：https://github.com/briancohn/learning-redux/blob/navigation_addn/App.js 我非常感谢您的帮助- 提前致谢！ -布赖恩

【问题讨论】：

标签： react-native redux

【解决方案1】：

我认为您更新商店的方式很好，但是您的组件监听更改的方式有问题。您似乎打算使用react-redux 中的connect 让容器连接到商店。然后您可以使用mapStateToProps 从存储中获取数据以作为道具传递到组件中。以https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options 为例。

【讨论】：