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