Estoy usando reaccionar nativo y redux. Ahora quiero crear un componente dinámico, por ejemplo, un componente desplegable. Paso un estado a través de accesorios que funciona bien, pero para que este componente sea reutilizable, tengo que llamar a la función de despacho correcta para este estado. No estoy seguro de si esa es la forma correcta de hacerlo. Solo estoy trabajando con reaccionar durante una semana ahora;)
En aras de la simplicidad, un componente de campo de texto simple:
import React, {Component} from 'react'; import {Button, StyleSheet, Text, TextInput, View} from 'react-native'; import allActions from '../../actions/allActions'; import {useDispatch, useSelector} from 'react-redux'; function Name (props) { const dispatch = useDispatch(); const componentState = props.state; /** * Save the new user to the state * @param text */ const handleChange = (text) => { // here I want to call the action dynamically // eg allActions.userActions.MY_VARIABLE_PASSED_THROUGH_PROPS dispatch(allActions.userActions.setUser(text)); } return ( <View> <TextInput style={styles.input} defaultValue={componentState} onChangeText={handleChange} /> </View> ); } export default Name;
Paso el estado cuando instalo el componente
<Name state={ store.getState().user.name } action={my_action_to_call}/>
EDITAR: Esta es mi acción de usuario
import * as actions from '../actionTypes'; const setUser = (userObj) => { return { type: actions.SET_USER, payload: userObj } } const setGender = (userObj) => { return { type: actions.SET_GENDER, payload: userObj } } export default { setUser, setGender }
¡No te preocupes! Eso es correcto. para hacer que los componentes dinámicos reaccionen, debe pasar valores y funcionar a través de accesorios. Sus acciones son funciones, por lo que puede pasar fácilmente su función y llamarla en su componente. Si yo fuera tú, definitivamente haría eso. me gusta:
const nameAction = (name) => { return { type: SET_NAME, payload: name } } <Name state={ store.getState().user.name } action={nameAction}/>
Me lo imaginé:
Llamada de componente
<Dropdown title={'Gender'} placeholder={'Select your gender'} action={userActions.setGender} state={ store.getState().user.gender } data={gender_data} />
y aquí está la función handleChange:
const handleChange = (e) => { let action = _props.action(e.value); dispatch(action); }