Can anyone explain me why my data (todos) is null?
store.ts
import { createApi, fetchBaseQuery } from '#reduxjs/toolkit/query/react'
export interface Todo {
id: number;
text: string;
active: boolean;
done: boolean;
}
export const todoApi = createApi({
reducerPath: 'todoApi',
baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.0.249:4000/'}),
tagTypes: ["Todos"],
endpoints: (builder) => ({
getAll: builder.query<Todo [], void>({
query: () => `todos`,
providesTags: [{ type: "Todos", id: "LIST" }]
})
})
})
App.tsx
import { ApiProvider } from '#reduxjs/toolkit/dist/query/react';
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { todoApi } from './store/store';
const TodoApp = () => {
const { data: todos, isLoading, error } = todoApi.useGetAllQuery()
console.log(todos);
return (
<View style={styles.container}>
<Text>Hello</Text>
<Text>{ JSON.stringify(todos) }</Text>
</View>
)
}
export default function App() {
return (
<ApiProvider api={todoApi}>
<TodoApp />
</ApiProvider>
);
}
What I am doing wrong ?
................................................................................................................................................................
Related
I create a component (AlertChild) to show alerts using redux in React-Native.
Currently when I call the dispatch from another component(another class)and this return, then the alertchild shows the message ok, but when I call the dispatch from the same component (Login), the alert is not showed and I can verify than the reducer (AlertReducer) is not called because the console.log() (in class AlertReducer) shows nothing.
AlertReducer:
export function AlertReducer(state = {}, action: any) {
console.log("Dispatch: " + action);
switch (action.type) {
case "INFO":
return {
alert: {
type: "info",
message: action.message,
},
};
case "DANGER":
return {
alert: {
type: "danger",
message: action.message,
},
};
case "CLEAR":
return {};
default:
return state;
}
}
AlertActions:
function showInfo(message: string) {
return {
type: "INFO",
message,
};
}
function showDanger(message: string) {
return {
type: "DANGER",
message,
};
}
function clear() {
return { type: "CLEAR" };
}
export const AlertActions = {
showInfo,
showDanger,
clear,
};
AlertChild:
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Toast } from "native-base";
import { AlertActions } from "../Store/Actions/AlertActions";
const AlertChild = (visible = true) => {
const alert = useSelector((state) => state.alert.alert);
const dispatch = useDispatch();
useEffect(() => {
ShowAlert();
}, [visible, dispatch]);
function ShowAlert() {
if (visible && alert !== undefined && Object.keys(alert).length) {
Toast.show({
text: alert.message,
buttonText: "X",
type: alert.type,
duration: alert.type === "danger" ? 60000 : 6000,
});
dispatch(AlertActions.clear());
}
}
return <></>;
};
export default AlertChild;
Login:
import React, { useState, useEffect, useContext } from "react";
import { Text, TextInput, View, Image } from "react-native";
import { Button, Spinner } from "native-base";
import styles from "./Styles/LoginStyles";
import { useDispatch } from "react-redux";
import AlertChild from "../Components/AlertChild";
import { AlertActions } from "../Store/Actions/AlertActions";
const Login = (props: any) => {
const { navigation } = props;
const dispatch = useDispatch();
useEffect(() => {
dispatch(AlertActions.clear());
}, [dispatch]);
async function Test() {
dispatch(AlertActions.showInfo("Hello"));
}
return (
<View style={styles.container}>
<Button onPress={async () => await Test()}>
<Text>Test</Text>
</Button>
<AlertChild {...props} />
</View>
);
};
export default Login;
Why the alert message is not displayed immediately?
I just needed to put in AlertChild the const "alert" (selector) in the useEffect:
useEffect(()=>{
ShowAlert()
},[visible, alert, dispatch])
I have a Text Input and I am attempting to send the value inputted to the store in my reducer, then display that value on the screen.
It appears the input value is not even making it to the store...can someone explain why I am not dispatching this correctly?
e.target.value is throwing an error of Undefined.
COMPONENT
import React, { Component,setState } from 'react';
import { StyleSheet, View, Button, Text, StatusBar, TextInput, TouchableOpacity, Image } from 'react-native';
import { connect } from 'react-redux';
class Counter extends Component {
emailHandler() {
this.props.email();
}
toggleCounterHandler() {}
render() {
return (
<View>
<View ><Text style={styles.welcometext}>{this.props.value}</Text></View>
<View>
<TextInput
style={styles.input}
onChangeText= {(e) => this.props.emailHandler(e.target.value)}
value={this.props.value}
secureTextEntry={false}
/>
</View>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
value: state.value
};
}
const mapDispatchToProps = dispatch => {
return {
email: (value) => dispatch({
type: 'email',
payLoad: value
})
//() => dispatch({type: 'email', text: this.state.text})
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
REDUCER
import React from 'react';
import { createStore } from 'redux';
const counterReducer = (state = { email:'email' }, action) => {
if (action.type === 'email') {
return {
...state,
email: action.payload,
};
}
console.log(state);
return state;
};
const store = createStore(counterReducer);
export default store;
If you have a look at onChangeText api from the docs, it is passing the text straightaway as a param. Thus, you don't have to use e.target.value
Also second thing, I noticed that you mapDispatchToProps as email instead of emailHandler? So your redux function should be this.props.email
You don't have to create another function emailHandler to use the redux in props
you should do this:
import React, { Component,setState } from 'react';
import { StyleSheet, View, Button, Text, StatusBar, TextInput, TouchableOpacity, Image } from 'react-native';
import { connect } from 'react-redux';
class Counter extends Component {
toggleCounterHandler() {}
render() {
return (
<View>
<View ><Text style={styles.welcometext}>{this.props.value}</Text></View>
<View>
<TextInput
style={styles.input}
onChangeText= {(e) => this.props.email(e.target.value)}
value={this.props.value}
secureTextEntry={false}
/>
</View>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
value: state.value
};
}
const mapDispatchToProps = dispatch => {
return {
email: (value) => dispatch({
type: 'email',
payLoad: value
})
//() => dispatch({type: 'email', text: this.state.text})
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
I am trying to fetch data from an API using React Native with Redux on localhost but it not fetching and it is displaying this error:
"TypeError: Can not convert undefine or null to an object"
Here is my code:
App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Router from './Router';
class App extends Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<Router />
</Provider>
);
}
}
export default App;
reducers/RestaurantList.js
import { RESTAURANT_SHOW } from '../actions/types';
const INITIAL_STATE = {
restaurant: ''
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case RESTAURANT_SHOW:
return {
...state,
restaurant: action.payload.data
};
default:
return state;
}
};
actions/RestaurantShow.js
import { RESTAURANT_SHOW } from './types';
import axios from 'axios';
export const restaurantShow = () => {
return (dispatch) => {
dispatch({
type: RESTAURANT_SHOW,
payload: { data: response.data }
})
return axios.post('http://MY IP ADDRESS/react/restaurant.php')
//.then((response) => {
// Actions.main({ resdata: response.data });
// })
.then((response)=> {
(dispatch(getRestaurant(response.data)))
})
.catch((error) => {
console.log(error);
});
}
}
export function getRestaurant(data) {
return {
type: RESTAURANT_SHOW,
data
}
}
component/Restaurant.js
import React, {Component} from 'react';
import { View,StyleSheet, Image, ListView, Text, ScrollView} from 'react-native';
import {connect} from "react-redux";
import {SearchBox, CardSection} from './common'
import * as actionCreators from "../actions/index.js";
class Restaurant extends Component{
componentWillMount() {
this.createDataSource(this.props);
}
componentWillReceiveProps(nextProps) {
this.createDataSource(nextProps);
console.log(this.props.id);
}
createDataSource({ resdata }) {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(resdata);
}
render(){
console.log(this.props);
return(
<ScrollView>
<SearchBox />
<View style={styles.MainContainer}>
<ListView
dataSource={this.dataSource}
renderRow={(rowData) =>
<View style={{flex:1, flexDirection: 'column'}} >
<CardSection>
<Text style={styles.text}>{rowData.name}</Text></CardSection>
</View> }
/>
</View>
</ScrollView>
);
}
}
const mapStateToProps = state => {
return state
};
export default connect (mapStateToProps, actionCreators)(Restaurant);
It is the screenshot of the error in the emulator
After my previous attempt failed, I ran git stash and started over, and the code inside return (dispatch) finally executed. Unfortunately, it began to execute twice, but still not populate the state (or by executing twice it overwrote the state).
Here is my code:
DivisionManagement\index.js
import React, {Component} from "react";
import {View, FlatList, Alert} from "react-native";
import {withNavigation} from "react-navigation";
import {connect} from "react-redux";
import PortableButton from "./../../components/PortableButton";
import masterStyles, {listPage, bigButtonStyles} from "./../../styles/master";
import DivisionManagementRow from "./DivisionManagementRow";
import { loadDivisions } from "../../redux/actions/divisionActions";
class DivisionManagmementScreen extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log(`Entered componentDidMount(), props: ${JSON.stringify(this.props)}`);
this.props.getAllDivisions(1);
console.log(`props again: ${JSON.stringify(this.props)}`);
}
_renderItem = ({item}) => {
console.log(`item: ${JSON.stringify(item)}`);
return (
<DivisionManagementRow divisionId={item.DIVISION_ID} divisionName={item.DIVISION_NAME}
onAddTeam={() => {this._addTeam(item.DIVISION_ID)}}
onEdit={() => {this._editDivision(item.DIVISION_ID)}}
onDelete={() => {this._btnDeleteDivision(item.DIVISION_ID)}}/>
)};
render() {
console.log(`Props in render: ${JSON.stringify(this.props)}`);
return (
<View style={masterStyles.component}>
<View style={listPage.listArea}>
<FlatList
data={this.props.divisions}
renderItem={this._renderItem}
keyExtractor={(item) => item.DIVISION_ID.toString() } />
</View>
<View style={listPage.bottomButtonArea}>
<PortableButton defaultLabel="Add Division"
disabled={false}
onPress={() => {this._addDivision()}}
onLongPress={() => {}}
style={bigButtonStyles} />
</View>
</View>
);
}
}
function mapStateToProps(state) {
console.log(`State: ${JSON.stringify(state)}`);
return {
programId: state.programId,
divisions: state.divisions,
isLoading: state.isLoadingDivisions
}
}
function mapDispatchToProps(dispatch) {
return {
getAllDivisions: (programId) => dispatch(loadDivisions(programId))
};
}
export default withNavigation(connect(mapStateToProps, mapDispatchToProps)(DivisionManagmementScreen));
divisionActions.js
import {query2} from "./../../util/DbUtils";
export const DIVISIONS_LOADING = "DIVISIONS_LOADING";
export const DIVISIONS_BY_PROGRAM = "DIVISIONS_BY_PROGRAM";
export const DIVISIONS_POPULATE = "DIVISIONS_POPULATE";
export function loadDivisions(programId) {
console.log(`loadDivisions, programId: ${JSON.stringify(programId)}`);
let result = (dispatch) => {
dispatch(isLoadingDivisions(true));
query2("SELECT * FROM DIVISION WHERE DIVISION_PROGRAM_ID = ?", [programId])
.then((queryResults) => {
console.log("Query results: " + JSON.stringify(queryResults));
return queryResults;
}).then((queryResults) => {
dispatch(isLoadingDivisions(false));
return queryResults;
}).then((queryResults) => {
console.log("Dispatching query results " + JSON.stringify(queryResults));
dispatch(populateDivisions(queryResults.result));
//return queryResults;
});
}
return result;
}
export function isLoadingDivisions(value) {
console.log(`Entered isLoadingDivisions, value: ${value}`);
return {
type: DIVISIONS_LOADING,
payload: value
}
}
export function getDivisionsByProgram(programId) {
return {
type: DIVISIONS_BY_PROGRAM,
payload: programId
}
}
export function populateDivisions(divisions) {
console.log(`populateDivisions(), divisions: ${JSON.stringify(divisions)}`);
return {
type: DIVISIONS_POPULATE,
payload: divisions
}
}
divisionReducer.js
import { DIVISIONS_LOADING, DIVISIONS_BY_PROGRAM } from "../actions/divisionActions";
import {loadDivisions} from "../actions/divisionActions";
export function isLoadingDivisions(state = false, action) {
console.log(`Entered isLoadingDivisions: ${JSON.stringify(action)}`);
switch (action.type) {
case DIVISIONS_LOADING:
return action.payload;
default:
return state;
}
}
export function divisions(state = [], action) {
console.log("Entered divisions()");
switch (action.type) {
case DIVISIONS_BY_PROGRAM:
let divisions = loadDivisions(action.payload);
console.log(`Divisions in divisions(): ${JSON.stringify(divisions)}`);
return divisions;
default:
return state;
}
}
reducers\index.js
import {combineReducers} from "redux";
import {isLoadingDivisions, divisions} from "./divisionReducer";
export default rootReducer = combineReducers({
isLoadingDivisions,
divisions
});
What should be happening here is that state should have an entry:
{ divisions: // populated array }
Instead, I'm getting this:
{ divisions: [] }
(The second one corresponds with the initial state, so maybe it's being overwritten?)
So I have one, or potentially two, problems with this code:
It's executing twice according to the logs
the divisions array in the state is not populating.
Can anyone help?
I have a problem during the login my redirection is not done, I use a rail API for the back, I can recover the user, but when I click on login the page reloads and does not navigate on the home screen.
In my AuthActions.js after the dispatch I added NavigationActions.navigate ('Home'), this should allow me to go to the home page
AppNavigator.js
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addNavigationHelpers, StackNavigator, TabNavigator } from 'react-navigation';
import { addListener } from '../../utils/redux';
import LoginScreen from '../login/LoginForm';
import RegisterScreen from '../register/RegisterForm';
import LogoutScreen from '../logout/Logout';
import Home from '../home/HomeList';
import Hair from '../hair/HairList';
export const Tabs = TabNavigator({
screen1: {
screen: Home
}
});
export const AppNavigator = StackNavigator({
Login: { screen: LoginScreen },
Main: { screen: Home },
Hair: { screen: Hair },
},{
initialRouteName : 'Login'
});
class AppWithNavigationState extends React.Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
nav: PropTypes.object.isRequired,
};
render() {
const { dispatch, nav } = this.props;
return (
<AppNavigator
navigation={addNavigationHelpers({
dispatch,
state: nav,
addListener,
})}
/>
);
}
}
const mapStateToProps = state => ({
nav: state.nav,
});
export default connect(mapStateToProps)(AppWithNavigationState);
AuthReducers.js
import {
EMAIL_CHANGED,
PASSWORD_CHANGED,
LOGIN_USER_SUCCESS,
LOGIN_USER_FAIL,
LOGIN_USER
} from '../actions/types';
const INITIAL_STATE = {
email: '',
password: '',
user: null,
error: '',
loading: false,
};
export default (state = INITIAL_STATE, action) => {
// console.log('action =>', action);
switch (action.type) {
case EMAIL_CHANGED:
return { ...state, email: action.payload };
case PASSWORD_CHANGED:
return { ...state, password: action.payload };
case LOGIN_USER:
return { ...state, loading: true, error: '' };
case LOGIN_USER_SUCCESS:
return { ...state, ...INITIAL_STATE, user: action.payload };
case LOGIN_USER_FAIL:
return { ...state, error: 'Authentication Failed.', password: '', loading: false };
default:
return state;
}
};
// newState === oldState ? nothing : update state, so component too
AuthActions.js
import { NavigationActions } from 'react-navigation';
import Api from '../api';
import User from '../models/User';
import {
EMAIL_CHANGED,
PASSWORD_CHANGED,
LOGIN_USER_SUCCESS,
LOGIN_USER_FAIL,
LOGIN_USER
} from './types';
export const emailChanged = (text) => {
return {
type: EMAIL_CHANGED,
payload: text
};
};
export const passwordChanged = (text) => {
return {
type: PASSWORD_CHANGED,
payload: text
};
};
export const loginUser = ({ email, password }) => {
return (dispatch) => {
dispatch({ type: LOGIN_USER });
Api.userSignUp(email, password)
.then((user) => loginUserSuccess(dispatch, user))
.catch((error) => {
console.log(error);
loginUserFail(dispatch);
});
};
};
const loginUserFail = (dispatch) => {
dispatch({
type: LOGIN_USER_FAIL
});
};
const loginUserSuccess = (dispatch, user) => {
// console.log('access token =>', User.getAccessToken());
// Api.createEmployee(null);
dispatch({
type: LOGIN_USER_SUCCESS,
payload: user,
});
NavigationActions.navigate('home'); //HERE NOT REDIRECT AFTER SUCCESS TO HOME
};
LoginForm.js
import React, { Component } from 'react';
import { Text } from 'react-native';
import { connect } from 'react-redux';
import { emailChanged, passwordChanged, loginUser } from '../../actions';
import { Card, CardSection, Input, Button, Spinner } from '../common';
class LoginForm extends Component {
onEmailChange(text) {
this.props.emailChanged(text);
}
onPasswordChange(text) {
this.props.passwordChanged(text);
}
onButtonPress() {
const { email, password } = this.props;
this.props.loginUser({ email, password });
}
renderButton() {
if (this.props.loading) {
return <Spinner size="large" />;
}
return (
<Button onPress={this.onButtonPress.bind(this)}>
Login
</Button>
);
}
render() {
return (
<Card>
<CardSection>
<Input
label="Email"
placeholder="email#gmail.com"
onChangeText={this.onEmailChange.bind(this)}
value={this.props.email}
/>
</CardSection>
<CardSection>
<Input
secureTextEntry
label="Password"
placeholder="password"
onChangeText={this.onPasswordChange.bind(this)}
value={this.props.password}
/>
</CardSection>
<Text style={styles.errorTextStyle}>
{this.props.error}
</Text>
<CardSection>
{this.renderButton()}
</CardSection>
</Card>
);
}
}
const styles = {
errorTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: 'red'
}
};
const mapStateToProps = ({ auth }) => {
const { email, password, error, loading } = auth;
return { email, password, error, loading };
};
export default connect(mapStateToProps, {
emailChanged, passwordChanged, loginUser
})(LoginForm);
App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import AppReducer from './reducers';
import AppWithNavigationState from './components/navigator/AppNavigator';
import { middleware } from './utils/redux';
import User from './models/User.js';
import {
NavigationActions,
} from 'react-navigation';
const store = createStore(
AppReducer,
applyMiddleware(ReduxThunk),
);
class App extends Component {
state = { isLoggedIn: null }
componentWillMount() {
// Si le asyncstorage a changé (connexion, etc)
User.getCurrent().then((user) => {
console.log('GetCurrentUser =>', user);
if (user) {
this.setState({isLoggedIn: true});
this.props.navigation.navigate('Main', user);
}
else {
this.setState({isLoggedIn: false});
}
})
}
render() {
return (
<Provider store={store}>
<AppWithNavigationState />
</Provider>
);
}
}
export default App;
I'm blocking for some day on the worries, I still is not finding a solution
use this code NavigationActions.NAVIGATE("home") works for me
You have to use componentWillReceiveProps in your Home like this:
//Home
componentWillReceiveProps(nextProps) {
if(nextProps.user) {
this.props.navigation.navigate('Home');
}
}
LoginForm.js
const mapStateToProps = state => {
return {
error: state.auth.error,
loading: state.auth.loading,
user: state.auth.user,
}
}
And you edit your AuthReducers.js like this:
case LOGIN_USER_SUCCESS:
return { ...state, ...INITIAL_STATE, user: action.user};
It works for me!