J'essaie de créer un état redux à partir d'une fonction définie dans une classe. J'obtiens Uncaught TypeError: Cannot read property 'type' of undefined lorsque j'utilise :

var c = new Counter(0)
counter = c.state

let store = createStore(counter)

Mais si j'utilise le function counter(state = 0, action), cela fonctionne correctement.

import { createStore } from 'redux'

class Counter {
    constructor(s) {
        this.s = s
    }

    state(action) {
        console.log("action" + action)
        switch (action.type) {
        case 'INCREMENT':
            return this.s + 1;
        case 'DECREMENT':
            return this.s - 1;
        default:
            return this.s
        }
    }
}

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

var c = new Counter(0)
counter = c.state

let store = createStore(counter)   // not working

store.subscribe(() => console.log(store.getState()))

store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })

export default store

Comment utiliser la classe et donner une fonction pour initialiser l'état ?

0
jsloop 11 mars 2019 à 22:27

2 réponses

Meilleure réponse

Lorsque redux appelle votre réducteur, il passera deux paramètres. Le premier est l'état redux, le second est l'action en cours. C'est le cas quel que soit le nom que vous donnez à vos paramètres. Donc, puisque votre fonction ressemble à ceci:

state(action) {
  console.log("action" + action)
  switch (action.type) {
  case 'INCREMENT':
      return this.s + 1;
  case 'DECREMENT':
      return this.s - 1;
  default:
      return this.s
  }
}

...alors l'état redux sera attribué à la variable mal nommée "action". Pendant ce temps, l'action ne sera affectée à aucun paramètre. L'état initial du redux n'est pas défini, vous voyez donc cette exception.

Au lieu de cela, modifiez votre fonction pour accepter deux paramètres ; l'état et l'action. En d'autres termes, utilisez votre code de travail :

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

Ce n'est pas à l'intérieur d'une classe, mais je ne sais pas pourquoi vous voulez qu'il le soit.

2
Nicholas Tower 11 mars 2019 à 19:36

Vous devez donc passer deux paramètres.

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}
const store = createStore(todos, ['Use Redux'])

Jetez un œil à https://redux.js.org/api/createstore

0
Subhendu Kundu 11 mars 2019 à 19:37