my Redux does not change the variables value. I am trying to test out Redux but I really cant find what I am doing wrong. For now I am only trying to Log a value but the value does not change.
This is my ReduxActions:
export const TEST_FUNC = 'TEST_FUNC';
export const testFunc = () => {
const theTestingString = "TAG testing redux";
return {
type: TEST_FUNC,
payload: theTestingString
}
}
In my Reducer I give the variable a initial value, and in my Actions file I am trying to change that value but when I console.log(testRedux) I only get the initial value. here is my Reducer:
import { TEST_FUNC } from "../actions/firebaseActions";
const initialState = {
theTestingString: 'Initial Value',
}
export default function(state = initialState, action) {
switch(action.type) {
case TEST_FUNC:
console.log("HSKJDKJSKFDBSKJKAJDL")
return {
...state,
theTestingString: action.payload
}
}
return state;
}
Here is my Store:
import {createStore, applyMiddleware, combineReducers} from 'redux';
import thunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension';
import firebaseReducer from './reducers/firebaseReducer';
const rootReducer = combineReducers({
firebaseTest: firebaseReducer
});
const middleware = composeWithDevTools(applyMiddleware(thunk));
export default createStore(rootReducer, middleware);
Here is where I am trying to log the value:
import { useNavigation } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {Button, Card, TextInput} from 'react-native-paper';
import { FirebaseContext } from '../../context/FirebaseContext';
import React, {useContext, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
const initialUserState = {
userName: 'Nicole Lopez',
password: '1001008888',
}
export default function LoginScreen() {
const [disabled, setDisabled] = useState(false);
const [userState, setUserState] = useState(initialUserState);
const testRedux = useSelector(state => state.firebaseTest.theTestingString);
//const fbContext = React.useContext(FirebaseContext);
const navigation = useNavigation();
console.log("Logging right away: " + testRedux);
const onInputChange = (field, value) => {
setUserState({
...userState,
[field]: value
})
}
useEffect(() => {
setDisabled(userState.userName.length === 0 || userState.password.length === 0);
}, [userState.userName, userState.password])
return (
<View style={styles.container}>
<Card style={styles.card}>
<TextInput
mode="outlined"
label="Förnamn & Efternman"
defaultValue={userState.userName}
onChangeText={text => onInputChange("username", text)}
right={<TextInput.Icon name="account" onPress={() => {
}}/>}
style={styles.textInput}/>
<TextInput
mode="outlined"
label="Anställningsnummer 100100xxxx"
defaultValue={userState.password}
right={<TextInput.Icon name="lock"/>}
onChangeText={text => onInputChange("password", text)}
style={styles.textInput}/>
</Card>
<View style={styles.buttonRow}>
<Button
color={disabled ? "gray" : undefined}
disabled={disabled}
mode={'contained'}
icon={'login'}
onPress={() => {
//console.log("The func: " + testRedux)
console.log("The variable: " + testRedux)
//console.log(fbContext)
//console.log("TAG isUserSignedIn: " + fbContext?.isuserSignedIn)
//console.log("TAG testLog:::: " + fbContext?.testLog())
//fbContext?.testLog()
//console.log("TAG LOGIN BTN PRESSED")
//navigation.navigate('HomeScreen')
}}>Login</Button>
</View>
</View>
);
}
This is my App.js:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {StackScreens} from './src/helpers/types';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import LoginScreen from './src/screens/LoginScreen/LoginScreen';
import HomeScreen from './src/screens/HomeScreen/HomeScreen';
import {doc, getFirestore, onSnapshot, setDoc, Unsubscribe as UnsubscribeFS} from 'firebase/firestore';
import { FirebaseContextProvider, FirebaseContext } from './src/context/FirebaseContext';
import { useContext } from 'react';
import {Provider} from 'react-redux';
import store from './src/redux/Store';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<Provider store={store}>
<Content />
</Provider>
);
}
export const Content = () => {
const navigationRef = useNavigationContainerRef();
const firebaseContext = useContext({FirebaseContext});
return (
<NavigationContainer ref={navigationRef}>
<Stack.Navigator initialRouteName="LoginScreen">
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="HomeScreen" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
I am new to ReactNative, I have tried Context but I got a similar issue, maybe I’m doing something in the wrong order?
