Estoy tratando de crear un sitio web simple usando react-redux y la biblioteca de asignación inmutable (en lugar de inmutable) para manejar mi estado. (documentación para immutable-assign: https://github.com/engineforce/ImmutableAssign)

He creado soluciones con las bibliotecas 'inmutable' y 'inmutable-assign', pero ninguna funciona (el código para la solución inmutable se comenta en el reductor a continuación. No importa qué cambios haga, el estado nunca cambia, y los valores nunca se asignan a menuItems

La función setMenu(newMenu) se llama actualmente con dummydata en forma de una lista de matrices en el siguiente formato:

menuItems: {
            id: "113",
            foodItem: "tesatewr",
            description: "gfdgsdfsdf",
            price: 999
        }

El reductor:

import { iassign } from 'immutable-assign'

export function setMenu(newMenu) {return {type: 'SET_MENU_ITEMS', newMenu}}

const initialState = {
  date: 'test', 
  menuId: 'test', 
  menuItems: []     

  }

 function menuViewReducer(state = initialState, action){
  switch(action.type){
    case 'SET_MENU_ITEMS':

      var itemList = iassign(
          state,
          function (n) { n.push('testtest'); return n}
      )

      return state.set(['menuItems'], itemList)
    default:
      return state  
  }
}

/* CODE FOR IMMUTABLE
 function menuViewReducer(state = fromJS(initialState), action){
  switch(action.type){
    case 'SET_MENU_ITEMS':
      return state.updateIn(['menuItems'], (menuItems) => menuItems.push(fromJS(action.newMenu.menuItems)))
    default:
      return state  
  }
} */


export const menuSelector = {
  date: state => state.menuViewList.date,
  menuId: state => state.menuViewList.menuId,
  menuItems: state => state.menuViewList.menuItems
}

export default menuViewReducer

Función de procesamiento:

render(){
    return (
      <div>
        Test data here: {this.props.menuItems}
        <ul className="menuViewList">{ this.mapMenuItemsToListElements() }</ul>
        <button 
        onClick={() => this.mapMenuItemsToListElements()}> get data  
        </button>
      </div>

    )
  }
0
BaconPancakes 19 feb. 2018 a las 18:16

2 respuestas

La mejor respuesta

Encontré el error y, como señaló Simon, es difícil encontrarlo en el código enviado.

Estaba llamando a setMenu (newMenu) en una función de generador, así que debería haberlo llamado así:

yield put(setMenu(newMenu))

En lugar de

setMenu(newMenu)

0
BaconPancakes 26 feb. 2018 a las 16:00

Es realmente difícil averiguar qué no funciona con este código. Lo mejor que puedo hacer es darte algunos consejos de depuración:

En primer lugar, ¿está recibiendo algún error? Si es así, parece un buen punto de partida.

De lo contrario, intente precisar dónde está ocurriendo el problema.

¿Está seguro de que se está llamando a su reductor?
Intentaría poner un console.log justo después de su case 'SET_MENU_ITEMS': para que sepa cuándo se está ejecutando su código.

Si no lo es:
El problema podría deberse a varias cosas:

  • Tu reductor no está conectado a tu tienda correctamente
  • No está enviando acciones correctamente a su tienda
  • Las acciones que está enviando no tienen su propiedad type configurada correctamente.

Si lo es:

El problema puede deberse a varias cosas diferentes. Algunos en los que puedo pensar:

  • Tu estado no se actualiza (correctamente). Intente registrar el estado al inicio de su reductor y su nuevo estado justo antes de devolverlo. O considere usar redux-devtools para inspeccionar su estado.
  • Tu vista no se actualiza. Quizás su componente no esté conectado correctamente a su tienda.
0
Simon Baumgardt-Wellander 20 feb. 2018 a las 16:42