how to pass a state to a container in react native - reactjs

Question

I am learning react native and i am building an application. For some concepts, I am not able to understand where the magic happens. I am using redux store for the managing the data.
I have a stateless login component.
export class Login extends Component {
onChangeText = (key, value) => {
this.props.user[key] = value
}
render() {
const { user, fetchUserDetails } = this.props
return (
<View style={styles.container}>
<Text style={styles.heading}>Login</Text>
<TextInput
placeholder='Email'
onChangeText={val => this.onChangeText('email', val)}
value={user.email}
/>
<TextInput
placeholder='Password'
onChangeText={val => this.onChangeText('password', val)}
value={user.password}
/>
<TouchableOpacity onPress={this.fetchUserDetails(user)}>
<View style={styles.button}>
<Text style={styles.buttonText}>Login</Text>
</View>
</TouchableOpacity>
</View>
)
}
}
This is my Login Container
class LoginContainer extends Component {
render () {
return (
<Login/>
)
}
}
const mapStateToProps = (state) => ({
user: state.loginReducer.user,
})
const mapDispatchToProps = {
...fetchUserDetails,
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)
my reducer looks like this:
const initialState = {
user: {
email: '',
password: '',
}
}
const loginReducer = (state = initialState, action) => {
switch(action.type) {
case GET_USER:
return Object.assign({}, state, {
user: action.user
})
default:
return state
}
return state
}
export default loginReducer
My actions look something like this:
export const GET_USER = 'GET_USER'
export function fetchUserDetails (user) {
console.log("executing fetch user action")
if (user === '')
{
alert('please complete form')
}
return {
type: GET_USER,
user
}
}
My root reducer:
import { combineReducers } from 'redux';
import loginReducer from './loginReducer'
const rootReducer = combineReducers({
loginReducer
})
export default rootReducer
My configure Store:
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import rootReducer from './reducers'
const persistConfig = {
key: 'mykey',
storage,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = createStore(persistedReducer)
const persistedStore = persistStore(store)
export default store
I need to have a stateless component which updates directly the state of the user attributes in the redux store. I am not able to follow how the state or actions will be passed to the Login component. Any Explanation will be appreciated.

Answer 1

Managing redux store in react-native is basically same as you do in react.
From what I understand you are trying to store user details in redux store on every onChangeText event and reflect the updated state in Login component.
Firstly you should use a separate action reducer pair for setting user details in redux. Also You most probably want to call some API on form submission and store the response in redux, For that you might need another pair of action and reducer. I'll leave that to you
Here's how u can manage user-details in redux...
Your stateless login component.
export class Login extends Component {
onChangeText = (value, key) => {
this.props.setUserDetails({
...this.props.user,
[key]: value
})
}
render() {
const { user, onSubmitForm } = this.props
console.log('user===>', this.props);
return (
<View style={styles.container}>
<Text style={styles.heading}>Login</Text>
<TextInput
placeholder='Email'
onChangeText={val => this.onChangeText(val, 'email')}
placeholderTextColor={'rgba(0,40,70,0.5)'}
value={user.email}
/>
<TextInput
placeholder='Password'
onChangeText={val => this.onChangeText(val, 'password')}
placeholderTextColor={'rgba(0,40,70,0.5)'}
value={user.password}
/>
<TouchableOpacity onPress={() => onSubmitForm(user)}>
<View style={styles.button}>
<Text style={styles.buttonText}>Login</Text>
</View>
</TouchableOpacity>
</View>
)
}
}
...
Your Login Container.
class LoginContainer extends Component {
onSubmitForm = () => {
// Checking Validations
const { name, email } = this.props;
if (!name || !email) {
alert('Please fill the form')
return;
}
// call some API for verification and handle the response here
}
render () {
return (
<Login
user={this.props.user}
setUserDetails={this.props.setUserDetails}
onSubmitForm={this.onSubmitForm}
/>
)
}
}
const mapStateToProps = (state) => ({
user: state.userReducer.user,
})
const mapDispatchToProps = dispatch => ({
setUserDetails: payload => dispatch(setUserDetails(payload)),
})
export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)
...
Your Reducer for setting user details
const initialState = {
user: {
email: '',
password: '',
}
}
const userReducer = (state = initialState, action) => {
switch(action.type) {
case 'SET_USER_DETAILS':
return Object.assign({}, state, {
user: action.user
})
default:
return state
}
return state
}
export default userReducer
...
Your store will remain same and rootReducer should be
import { combineReducers } from 'redux';
import userReducer from './reducer'
const rootReducer = combineReducers({
userReducer
})
export default rootReducer
...
Finally your Action
export const SET_USER_DETAILS = 'SET_USER_DETAILS'
export function setUserDetails (user) {
return {
type: 'SET_USER_DETAILS',
user
}
}
...
Hope it helps.

Answer 2

Hope that helps:
Login:
You must NEVER update a component props inside the said component.
From the React documentation:
Props are Read-Only
If you want your state (the truth) to be stored in the login component, then store it as a proper state and send this local state on submit:
onChangeText = (key, value) => {
this.setState((state) => ({ ...state, [key] => value}))
}
However, if you want to store your state in redux, you will need to create an action that can be triggered to update the redux state. This action needs to be passed to your component props and called like this onChangeText={val => this.props.onChangeText('email', val)}
Also, your calling the fetchUserDetails function on render, where you should be passing a callback. this.fetchUserDetails does not exists, this.props.fetchUserDetails does. The login code becomes
<TouchableOpacity onPress={() => fetchUserDetails(user)}>
Login Container:
mapDispatchToProps must be a function that takes dispatch as first parameter OR an object where each function is an action creator. From the Redux documentation:
If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.
So the code you wrote:
const mapDispatchToProps = {
...fetchUserDetails,
}
Is equivalent to this code
function mapDispatchToProps(dispatch) {
return {
fetchUserDetails: (user) => dispatch(fetchUserDetails(user))
},
}
The dispatch function is where the magic happens, every action that is dispatched is passed down to your reducers where you can create a new state based on the action.