javascript - usar - ¿Cómo dividir la lógica entre los reductores de Redux y los creadores de acción?

redux que es un reducer

Question

Tengo un poco de lógica que he puesto en el reductor, que estoy pensando que posiblemente debería poner en la Acción y transmitido?

¿Es una buena práctica poner este tipo de cosas en las acciones o en el reductor?

Ejemplo de trabajo here .

Código de reductor:

function Card() {
this.card = (Math.random()*4).toFixed(0);
}
Card.prototype = {
getRandom: function(){
var card;
//console.log(this.card)
switch (this.card) {
case ''1'':
card = ''heart'';
break;
case ''2'':
//card = ''diamonds'';
card = ''heart''; // weight the odds abit
break;
case ''3'':
card = ''club'';
break;
case ''4'':
card = ''spade'';
break;
default:
card = ''heart'';
break;
}
return card;
}
}
var dealer = {
deal: function(){
var results = [];
for(var i = 0; i <4; i++){
var card = new Card();
results.push(card.getRandom());
}
console.log(results);
return results;
}
}
const initialState = {
count: 0,
data: []
}
function counter (state = initialState, action) {
let count = state.count
switch (action.type) {
case ''increase'':
return Object.assign({}, state, {
data: dealer.deal(),
count: state.count+1
})
default:
return state
}
}

Answer 1

Parece que es una mejor práctica tener una clase estática que maneje los puntos intermedios de primer nivel que ejemplifique las acciones de reducción fuera del redux.

Supongo que tiene sentido mantener la tienda y las cadenas de acción en estado puro.

Esto podría parecer mucho código replicado al principio, pero cuando comienzas a enviar en función de las condiciones o necesitas despachar desde varios lugares, comienza a abrirse y tiene sentido.

Answer 2

Según entiendo, las acciones deben ser objetos simples que contengan dos cosas: (i) el tipo de acción y (ii) qué cambió (es decir, los datos nuevos).

Los reductores, por otro lado, son funciones puras que toman acciones y la aplicación anterior indican como entradas y devuelven el nuevo estado de la aplicación. Cómo logran esto depende de usted. Puede agregar cualquier lógica necesaria para tomar la combinación de estado + acción anterior y devolver el nuevo estado siempre que no mute los datos fuera de la (s) función (es) del reductor.

En cuanto a su código específicamente, no estoy seguro de que la función deal() pertenezca a una acción o a un reductor. Creo que un mejor lugar podría estar en algún tipo de controlador de eventos (por ejemplo, onClick ). A continuación, puede pasar los resultados de la llamada de reparto como una acción a su reductor.

Answer 3

Tu reductor debe ser puro. Actualmente no es puro. Llama a deal() que llama a getRandom() que se basa en Math.random() y por lo tanto no es puro.

Este tipo de lógica ("generación de datos", ya sea aleatoria o de entrada del usuario) debe estar en el creador de la acción. Los creadores de acciones no necesitan ser puros y pueden usar Math.random() manera segura. Este creador de acciones devolvería una acción, un objeto que describe el cambio :

{
type: ''DEAL_CARDS'',
cards: [''heart'', ''club'', ''heart'', ''heart'']
}

El reductor simplemente agregaría (¿o reemplazaría?) Esta información dentro del estado.

En general, comienza con un objeto de acción. Debería describir el cambio de tal forma que ejecutar el reductor con el mismo objeto de acción y el mismo estado anterior devuelva el mismo estado siguiente. Esta es la razón por la cual el reductor no puede contener llamadas Math.random() ; romperían esta condición, ya que serían aleatorios todo el tiempo. No podrías probar tu reductor.

Después de descubrir cómo se ve el objeto de acción (por ejemplo, como arriba), puede escribir el creador de acciones para generarlo, y un reductor para transformar el estado y la acción al siguiente estado. La lógica para generar una acción reside en el creador de acciones, la lógica para reaccionar a ella reside en el reductor, el reductor debe ser puro.

Finalmente, no use clases dentro del estado . No son serializables como es. No necesitas una clase de Card . Solo use objetos simples y matrices.