मुझे लगता है कि मॉडल के रूप में आवश्यक हैं किसी भी अन्य सिस्टम के लिए एक Redux आधारित ऐप के लिए।
मॉडल सिस्टम की शब्दावली हैं। मॉडल कोडबेज में सैनिटी लाते हैं। उनके बिना एक कोडबेस पागल विकृत विचारों की एक श्रृंखला की तरह दिखता है।
आप ReactJS + Redux ऐप्स में मॉडलों की आवश्यकता को भरने के लिए राज्य कार्यों का उपयोग कर सकते हैं। मॉडल जैसे डेटा और विधियों को पकड़ते हैं, इन ऑब्जेक्ट्स केवल उन कार्यों को पकड़ते हैं जिन्हें राज्य पर लागू किया जा सकता है।
यहां पढ़ें: https://medium.com/@nshnt/state-functions-for-modeling-with-redux-a9b9d452a631।
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;
कार्य करने-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)
};
मैं भी
यहाँ राज्य कार्यों के साथ प्रसिद्ध Redux TODO अनुप्रयोग उदाहरण है घटक में इन राज्य कार्यों का उपयोग करें, अगर घटक को राज्य के कुछ हेरफेर की आवश्यकता है।
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);
पहली नज़र में, जो मेरे लिए राज्य की तरह लगता है। राज्य में 'नाम' डालने के लिए आपको क्या आपत्ति है? –
नाम ही वास्तव में राज्य है, हालांकि उस नाम की संपत्ति का "लेबल" राज्य नहीं है। यह मॉडल में गुणों के बारे में जानकारी है। –
यदि नाम के "लेबल" को किसी घटक में प्रोप के रूप में उपयोग किया जाता है, तो मैं कहूंगा कि यह राज्य है। –