آموزش کار با Redux

برچسب ها: redux

این موضوع 1 پاسخ، 2 کاربر را دارد و آخرین بار در 2 سال، 11 ماه پیش بدست مهدی حسن زاده به‌روزرسانی شده است.

در حال نمایش 2 نوشته (از کل 2)

نویسنده

نوشته‌ها

دسامبر 23, 2020 در 8:22 ب.ظ #51775 پاسخ

مشارکت کننده

سلام
من آموزش redux این وب سایت رو مو به مو انجام دادم و جلو رفتم. همه چیز درست کار میکنه. اما همانطور که در عنوان گفتم مقداری که در TextInput تایپ میکنم، با مقدار جدید جمع نشده و همواره مقدار ” در اینپوت قرار میگرد. و عملا هیچ چیزی در اینپوت تایپ نمی شود.
ساده تر بخوام توضیح بدم این میشه که، وقتی من توی TextInput متنی رو تایپ میکنم، سریعا textInput خالی (null) شده و مقداری که تایپ میکنم در اینپوت قرار نمیگیره

components/loginForm
ـــــــــــــــــــــــــــ

import 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>
        <TextInput
          placeholder="Email"
          onChangeText={() => this.onEmailChange.bind(this)}
          value={this.props.email}
        />
        <TextInput
          placeholder="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);

import 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>

<TextInput

placeholder="Email"

onChangeText={() => this.onEmailChange.bind(this)}

value={this.props.email}

<TextInput

placeholder="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


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

import 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>

);

}

ــــــــــــــــــــــــــ

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

import {AppRegistry} from 'react-native';

import App from './App';

import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

ــــــــــــــــــــــــــ
action/index.js


import { 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 });
}

import { 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.js


export 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';

export 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.js

import { 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;

import { 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.js


import { combineReducers } from 'redux';
import AuthReducer from '../reducers/AuthReducer';
const reducers = combineReducers({
  auth: AuthReducer
});
export default reducers;

import { combineReducers } from 'redux';

import AuthReducer from '../reducers/AuthReducer';

const reducers = combineReducers({

auth: AuthReducer

});

export default reducers;

ــــــــــــــــــــــــــ
package.json


{
  "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"
  }
}

{

"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"

}

دسامبر 24, 2020 در 10:06 ق.ظ #51779 پاسخ

مهدی حسن زاده

مدیرکل

سلام
در reducer مربوط به TextInput از payload یک console.log بگیرید و ببنید ایا اصلا دیتایی که کاربر وارد میکنه رو دارید؟

نویسنده

نوشته‌ها

در حال نمایش 2 نوشته (از کل 2)

Redux – مشکل مقدار جدید state در ولیو یک TextInput