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>
)
}
2 respuestas
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)
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.
Preguntas relacionadas
Nuevas preguntas
reactjs
React es una biblioteca de JavaScript para crear interfaces de usuario. Utiliza un paradigma declarativo basado en componentes y tiene como objetivo ser eficiente y flexible.