[英]Redux reducer can't update redux state/props
我正在努力使用 TextInput(ReactNative) 从 redux 更新道具/状态。 我可以从 redux 到 SignIn 组件获取操作和初始状态,但是我无法更新电子邮件道具(输入值)。 我搜索了一个解决方案,但找不到解决我的问题的解决方案。
SignInScreen
组件在 props 中接收操作,我可以从组件访问 AuthReducer 所以我猜 Redux 结构很好。 仅在 AuthReducer.js 中, return {...state, email: action.payload} 不会更新 props。
以下是我的代码。 我已经发布了重要的部分,但如果需要,我会添加更多。
AuthReducer.js
// I can access this reducer
// INITIAL_STATE will be shown TextInput components
import {EMAIL_CHANGED } from '../actions/actionTypes';
import { AlertIOS } from 'react-native';
const INITIAL_STATE = { email: 'this is shown' }
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMAIL_CHANGED:
// This alert function works with inputted payload(email)
AlertIOS.alert('Input', action.payload);
// This return doesn't update props.email in SignInScreen Component
return { ...state, email: action.payload };
default:
return state;
}
}
配置Store.js
import AuthReducer from './reducers/AuthReducer';
import { createStore, combineReducers } from 'redux';
const rootReducer = combineReducers({
auth: AuthReducer
});
const configureStore = () => {
return createStore(rootReducer);
};
export default configureStore;
登录屏幕.js
import { connect } from 'react-redux';
import { emailChanged } from '../../store/actions';
import etc...
onEmailChange = (text) => {
this.props.emailChanged(text);
};
render() {
return (
<View>
<View>
<Text>Email:</Text>
<TextInput
placeholder="email@mail.com"
autoCorrect={false}
value={this.props.email}
onChangeText={email => this.onEmailChange(email)}
/>
</View>
</View>
);
}
const mapStateToProps = state => {
return {
email: state.auth.email
};
};
export default connect(mapStateToProps, { emailChanged })(SignInScreen);
应用程序.js
import etc...
render() {
return (
<Provider store={store}>
<AppNavigator
style={styles.container} //Stephen Girder course said this was good practice
//to ensure fills screen with flex: 1
/>
</Provider>
);
}
const store = configureStore();
export default App;
包.json
"expo": "^32.0.0",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-dom": "^16.8.6",
"react-navigation": "^3.10.2",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
你忘记发送动作了。 尝试在SignInScreen.js 中使用以下内容:
const mapStateToProps = state => {
return {
email: state.auth.email
};
};
const mapDispatchToProps = dispatch => {
return {
emailChanged: value => dispatch(emailChanged(value))
}
};
export default connect(mapStateToProps, mapDispatchToProps)(SignInScreen);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.