0
在反应本土癌症治疗的应用程序工作：阵营本地终极版店内正确调度减速，但不更新UI组件
目前的功能：当我移动滑块并更改日期我的应用程序，将分派成功更改了redux商店。不幸的是，我的用户界面并没有更新，即使我正在调用与我要求调度的表示组件相同的store。
导致此： GIF of redux store changing while UI is static
印刷通过
store.getState();
store.subscribe(() =>
console.log(store.getState())
);
我试着用申购，但似乎这是不是去的正确方法。思考？从我的代码（全部在一个小的文件，下面的链接）
行动
//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 我真的很感谢帮助- 在此先感谢！ -Brian