Credo che i modelli sono necessari per un'applicazione basata su Redux come per qualsiasi altro sistema.
I modelli sono il vocabolario di un sistema. I modelli portano sanità mentale al codice base. Senza di loro una base di codice sembra una serie di pensieri distorti folle.
È possibile utilizzare le funzioni di stato per soddisfare le necessità dei modelli nelle app ReactJS + Redux. Proprio come i modelli contengono dati e metodi, questi oggetti contengono solo le funzioni che possono essere applicate allo stato.
Leggi qui: https://medium.com/@nshnt/state-functions-for-modeling-with-redux-a9b9d452a631.
Ecco il famoso esempio app Redux TODO con funzioni di stato:
todo_reducer.js:
import TODO from './todo_state';
const todoListReducer = (state=TODO.initialState(), action)=>{
switch(action.type){
case 'ADD_TODO' :
return TODO.addTask(state, action.taskName);
case 'FINISHED_TODO':
return TODO.setFinished(state, action.taskID);
case 'PENDING_TODO':
return TODO.setPending(state, action.taskID);
default :
return state;
}
};
export default todoListReducer;
todo-state.js:
export default {
initialState:() => [],
addTask: (todoList, name)=> todoList.concat({id: todoList.length, name: name}),
setFinished: (todoList, taskId) => (
todoList.map(task=> task.id === taskId ? {...task, complete: true} : task)
),
setPending: (todoList, taskId) => (
todoList.map(task=> task.id === taskId ? {...task, complete: false} : task)
),
pending: todoList=> todoList.filter(task=> !task.complete)
};
anche io usa queste funzioni di stato nel componente, se il componente necessita di qualche manipolazione di stato.
todo_list.js:
import React from 'react';
import {connect} from 'react-redux';
import TODO from './todo_state';
const TodoList = ({tasks, showCompletedTasks, toggleTodo})=> {
const toListElement = (task) => (
<li key={task.id}>
<input type="checkbox" checked={task.complete} onChange={(e)=> toggleTodo(task)}/>
<label>{task.name} {task.complete ? "Complete" : "Pending"}</label>
</li>
);
const visibleTaskList =
(showCompletedTasks ? tasks
: TODO.pending(tasks)).map(toListElement);
return (
<ul className="todo-list">
{visibleTaskList}
</ul>
);
}
.....
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
A prima vista, che sembra come stato per me. Quale obiezione hai per mettere il nome in stato? –
Il nome stesso è effettivamente stato, tuttavia l'"etichetta" di quella proprietà nome non è stato. Sono informazioni sulle proprietà nel modello. –
Se la "etichetta" del nome è usata come oggetto di scena in un componente, direi che è lo stato. –