آموزش جاوااسکریپت › انجمن ها › react native › Redux – مشکل مقدار جدید state در ولیو یک TextInput
برچسب ها: redux
- این موضوع 1 پاسخ، 2 کاربر را دارد و آخرین بار در 2 سال، 5 ماه پیش بدست مهدی حسن زاده بهروزرسانی شده است.
-
نویسندهنوشتهها
-
HamidReza Ghafouriمشارکت کننده
سلام
من آموزش redux این وب سایت رو مو به مو انجام دادم و جلو رفتم. همه چیز درست کار میکنه. اما همانطور که در عنوان گفتم مقداری که در TextInput تایپ میکنم، با مقدار جدید جمع نشده و همواره مقدار ” در اینپوت قرار میگرد. و عملا هیچ چیزی در اینپوت تایپ نمی شود.
ساده تر بخوام توضیح بدم این میشه که، وقتی من توی TextInput متنی رو تایپ میکنم، سریعا textInput خالی (null) شده و مقداری که تایپ میکنم در اینپوت قرار نمیگیرهcomponents/loginForm
ـــــــــــــــــــــــــــJavaScript12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758import React, { Component } from 'react';import { View, TextInput, Text, FlatList, ActivityIndicator, TouchableOpacity } from 'react-native';import { connect } from 'react-redux';import { emailChanged, passChanged, loginUser } from '../actions/index';class LoginForm extends Component {onEmailChange(text) {this.props.emailChanged(text)}onPassChange(text) {this.props.passChanged(text)}onLoginUser() {const { email, pass } = this.props;this.loginUser({ email, pass });}renderButton() {if (this.props.loading) {return (<ActivityIndicator size="large" color="#0000ff" />);} else {return (<TouchableOpacity onPress={() => this.onLoginUser.bind(this)} ><Text>Continue...</Text></TouchableOpacity>)}}render() {return (<View><TextInputplaceholder="Email"onChangeText={() => this.onEmailChange.bind(this)}value={this.props.email}/><TextInputplaceholder="Pass"onChangeText={() => this.onPassChange.bind(this)}secureTextEntry={true}value={this.props.pass}/><Text>{this.props.error}</Text>{this.renderButton()}</View>);}}const mapStateToProps = state => {return {email: state.auth.email,pass: state.auth.pass,loading: state.auth.loading,error: state.auth.error}}export default connect(mapStateToProps, { emailChanged, passChanged, loginUser })(LoginForm);ــــــــــــــــــــــــــ
App.js
JavaScript123456789101112131415161718import React, { Component } from 'react';import { View, TextInput, Text, FlatList, Pressable } from 'react-native';import { Provider } from 'react-redux';import { applyMiddleware, createStore } from 'redux';import reducers from './reducers/index';import LoginForm from './components/LoginForm';import ReduxThunk from 'redux-thunk';export default class App extends Component {render() {return (<Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}><LoginForm /></Provider>);}}ــــــــــــــــــــــــــ
index.js
JavaScript12345import {AppRegistry} from 'react-native';import App from './App';import {name as appName} from './app.json';AppRegistry.registerComponent(appName, () => App);ــــــــــــــــــــــــــ
action/index.jsJavaScript1234567891011121314151617181920212223242526272829303132333435363738394041424344import { EMAIL_CHANGED, PASS_CHANGED, USER_LOGIN_ATEMT, USER_LOGIN_SUCCESS, USER_LOGIN_FAILED } from "./types";export const emailChanged = (text) => {return {type: EMAIL_CHANGED,payload: text}}export const passChanged = (text) => {return {type: PASS_CHANGED,payload: text}}export const loginUser = ({ email, pass }) => {return (dispatch) => {dispatch({ type: USER_LOGIN_ATEMT });fetch('', {method: 'POST',headers: {'Accept': 'application/json','Content-Type': 'application/json'},body: JSON.stringify({email: email,password: pass})}).then((response) => response.json()).then((responseJson) => {if (responseJson === 'Data Matched') {loginUserSuccess(dispatch);} else {loginUserFailed(dispatch);}}).catch((error) => { alert(error) });}}const loginUserSuccess = (dispatch) => {dispatch({ type: USER_LOGIN_SUCCESS });}const loginUserFailed = (dispatch) => {dispatch({ type: USER_LOGIN_FAILED });}ــــــــــــــــــــــــــ
action/types.jsJavaScript123456export const EMAIL_CHANGED = 'EMAIL_CHANGED';export const PASS_CHANGED = 'PASS_CHANGED';export const USER_LOGIN_ATEMT = 'USER_LOGIN_ATEMT';export const USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS';export const USER_LOGIN_FAILED = 'USER_LOGIN_FAILED';ــــــــــــــــــــــــــ
reducers/AuthReducer.jsJavaScript123456789101112131415161718192021222324252627282930import { EMAIL_CHANGED, PASS_CHANGED, USER_LOGIN_ATEMT, USER_LOGIN_SUCCESS, USER_LOGIN_FAILED } from '../actions/types';const initialState = {email: '',pass: '',loading: false,error: ''}const AuthReducer = (state = initialState, action) => {console.log(action);switch (action.type) {case EMAIL_CHANGED:return { ...state,email: state.email.concat({key: Math.random(),value: action.payload})}case PASS_CHANGED:return { ...state, pass: action.payload }case USER_LOGIN_ATEMT:return { ...state, loading: true }case USER_LOGIN_SUCCESS:return { ...state, ...initialState }case USER_LOGIN_FAILED:return { ...state, loading: false, pass: '', error: 'اشتباه وارد شده است' }default:return state;}}export default AuthReducer;ــــــــــــــــــــــــــ
reducer/index.jsJavaScript1234567import { combineReducers } from 'redux';import AuthReducer from '../reducers/AuthReducer';const reducers = combineReducers({auth: AuthReducer});export default reducers;ــــــــــــــــــــــــــ
package.jsonJavaScript1234567891011121314151617181920212223242526272829303132333435363738394041424344{"name": "IMDB","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ."},"dependencies": {"@react-navigation/native": "^5.8.10","@react-navigation/stack": "^5.12.8","axios": "^0.21.1","native-base": "^2.15.0","react": "16.13.1","react-native": "0.63.4","react-native-actions-sheet": "^0.3.5","react-native-awesome-alerts": "^1.4.2","react-native-banner-carousel": "^1.0.3","react-native-elements": "^3.0.1","react-native-linear-gradient": "^2.5.6","react-native-responsive-screen": "^1.4.1","react-native-webview": "^11.0.2","react-redux": "^7.2.2","redux": "^4.0.5","redux-thunk": "^2.3.0"},"devDependencies": {"@babel/core": "^7.12.10","@babel/runtime": "^7.12.5","@react-native-community/eslint-config": "^2.0.0","babel-jest": "^26.6.3","eslint": "^7.16.0","jest": "^26.6.3","metro-react-native-babel-preset": "^0.64.0","react-test-renderer": "16.13.1"},"jest": {"preset": "react-native"}}مهدی حسن زادهمدیرکلسلام
در reducer مربوط به TextInput از payload یک console.log بگیرید و ببنید ایا اصلا دیتایی که کاربر وارد میکنه رو دارید؟ -
نویسندهنوشتهها