Bonjour,

Nouveau probleme dans le suivi du MOOC react-native...

Cette fois à l'utilisation de la librairie REDUX dans le chapitre "Intégrez Redux dans votre application"

Dans le fichier FilmDetail.js V1 (en bas de cette page),

• la vue FilmDetail s'affiche mais ,
• dans le console.log  je ne vois pas l'objet contenant "favoritesFilm" comme attendu.
• Je recois à la place un object "state" qui est undefined.

Dans le fichier FilmDetail V2

• La Vue FilmDetail ne s'affiche plus (j'ai une erreur : undefined is not an object (evaulating 'state.favoritesFilm')

//app.js
import React from 'react';

//import Search from './Components/Search';
import Navigation from './Navigation/Navigation';
import { Provider } from 'react-redux'
import Store from './Store/configureStore'

export default class App extends React.Component {
  render() {
    return (
      <Provider store={Store}>
        <Navigation/>
      </Provider>
    )
  }
}

//configureStore.js

import { createStore } from 'redux';
import toggleFavorite from './Reducers/favoriteReducer';


export default createStore(toggleFavorite);

//favoriteReducer.js
const initialState = { favoritesFilm:[] }

function toggleFavorite(state, action){

    let nextState

    switch(action.type){
        case 'TOGGLE_FAVORITE':
            const favoriteFilmIndex = state.favoritesFilm.findIndex(item => item.id === action.value.id)
            if (favoriteFilmIndex !== -1) {
              // Le film est déjà dans les favoris, on le supprime de la liste
              nextState = {
                ...state,
                favoritesFilm: state.favoritesFilm.filter( (item, index) => index !== favoriteFilmIndex)
              }
            }
            else {
              // Le film n'est pas dans les films favoris, on l'ajoute à la liste
              nextState = {
                ...state,
                favoritesFilm: [...state.favoritesFilm, action.value]
              }
            }
            return nextState || state
        default:
            return state;
    }
}

export default toggleFavorite;

//FilmDetail.js V1

...

const mapStateToProps = (state) => {
  return {
    state
  }
}

export default connect(mapStateToProps)(FilmDetail) 

//FilmDetail.js V2

...

const mapStateToProps = (state) => {
  return {
    favoritesFilm: state.favoritesFilm
  }
}

export default connect(mapStateToProps)(FilmDetail)

Salut,
Je suis en train de faire le tuto et je pense que c'est un soucis de version depuis ça sortie. J'ai rencontré le même soucis.

Personnellement j'ai remplacé :

import Store from './Store/configureStore'

par

import { createStore } from'redux'
importtoggleFavoritefrom'./Store/Reducer/favoriteReducer.js'

constStore = createStore(toggleFavorite);

Et cela fonctionne !

-
Edité par BaptisteFuseau 19 janvier 2021 à 11:05:35

Bonjour à tous, 

en ce qui me concerne j'ai rencontré le même problème :

• je me suis rendu compte que VS Code avait changé le module d'import de l'objet Provider et pointait vers le module 'react-native/Libraries/Text/TextAncestor'
• et j'ai écrit, comme dans le code de CIAO260 function toggleFavorite(state, action) au lieu de function toggleFavorite(state = initialState, action)