استخدام التدفق في ReactJS

في هذا الفصل، سنتعلم كيفية تحقيق نموذج التدفق في تطبيقات React. سنستخدم إطار Redux. هدف هذا الفصل هو عرض أقل مثال ممكن لكل جزء من الاتصال بين Redux وReact.

الخطوة 1- تثبيت Redux

سنقوم بذلك من خلالcommand promptتثبيت Redux في النافذة

C:\Users\username\Desktop\reactApp>npm　install　--save　react-redux

الخطوة 2- إنشاء مجلدات وملفات

في هذه الخطوة، سنقوم بإنشاء مجلدات وملفات لناactions،reducersوcomponentsبعد إكمالها، هذا هو شكل بنية الملفات.

C:\Users\w3codebox\Desktop\reactApp>mkdir　actions
C:\Users\w3codebox\Desktop\reactApp>mkdir　components
C:\Users\w3codebox\Desktop\reactApp>mkdir　reducers
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　actions/actions.js
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　reducers/reducers.js
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　components/AddTodo.js
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　components/Todo.js
C:\Users\w3codebox\Desktop\reactApp>type　nul　>　components/TodoList.js

الخطوة 3- التحركات

التحركات هي أجسام JavaScript، وتستخدمالنوعخصائص لتعليمات البيانات التي يجب إرسالها إلى المتجر. نحن نحددADD_TODOستستخدم لإنشاء عملية إضافة مشروع جديد إلى القائمة. هذهaddTodoالوظيفة هي مبتدئة الحركة، وتعيد لدينا الحركةidللكل عنصر يتم إنشاؤه.

actions / actions.js

تصدير const ADD_TODO = 'ADD_TODO'
let nextTodoId = 0;
تصدير وظيفة addTodo(text) {
　　　return {
　　　　　　type: ADD_TODO,
　　　　　　id: nextTodoId++,
　　　　　　text
　　　};
}

الخطوة 4-Reducers

بالرغم من أن العمليات تسبب تغييرات فقط في تطبيق، إلا أن reducer يشير إلى هذه التغييرات. نحن نستخدم جملة التحول للبحث عن عملية ADD_TODO. reducer هو وظيفة تحتاج إلى مرتبطين (الحالة والفعل) لحساب وإرجاع الحالة المعدلة.

ستستخدم الوظيفة الأولى لإنشاء عنصر جديد، والوظيفة الثانية لتقديم هذا العنصر إلى القائمة. في النهاية، سنستخدم وظيفة combineReducers المساعدة، حيث يمكننا إضافة أي reducer جديد قد نستخدمه في المستقبل.

reducers / reducers.js

استيراد { combineReducers } من 'redux'
استيراد { ADD_TODO } من '../actions/actions'
وظيفة todo(state, action) {
　　　تحويل (action.type) {
　　　　　　حالة ADD_TODO:
　　　　　　　　　return {
　　　　　　　　　　　　id: action.id,
　　　　　　　　　　　　text: action.text,
　　　　　　　　　}
　　　　　　افتراضي:
　　　　　　　　　إرجاع الحالة
　　　}
}
وظيفة todos(state = [], action) {
　　　تحويل (action.type) {
　　　　　　حالة ADD_TODO:
　　　　　　　　　إرجاع [
　　　　　　　　　　　　...الحالة,
　　　　　　　　　　　　todo(undefined, action)
　　　　　　　　　]
　　　　　　افتراضي:
　　　　　　　　　إرجاع الحالة
　　　}
}
تعريف todoApp = combineReducers({
　　　todos
)
تصدير افتراضي todoApp

الخطوة 5-Store

main.js

استيراد React من 'react'
استيراد { render } من 'react-dom'
استيراد { createStore } من 'redux'
import { Provider } from 'react-redux'
import App from './App.jsx'
import todoApp from './reducers/reducers'
let store = createStore(todoApp)
let rootElement = document.getElementById('app')
render(
　　　<Provider store={store}>
　　　　　　<App />
　　　</Provider>,
　　　rootElement
)

الخطوة 6-المكون الجذر

مكون App هو المكون الجذر للتطبيق. فقط يجب أن يعرف المكون الجذر Redux. الجزء المهم الذي يجب الانتباه إليه هو وظيفة connect التي تستخدم لتوصيل المكون الجذر App بالمخزن.

هذه الوظيفة تأخذ وظيفة select كمعامل. وظيفة select تحصل على الحالة من المخزن وتعيد الأدوات التي يمكن استخدامها في المكون (visibleTodos).

App.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'
import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'
class App extends Component {
　　　render() {
　　　　　　const { dispatch, visibleTodos } = this.props
　　　　　　
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<AddTodo onAddClick={{text => dispatch(addTodo(text))}} />
　　　　　　　　　　　　<TodoList todos={{visibleTodos}} />
　　　　　　　　　</div>
　　　　　　)
　　　}
}
function select(state) {
　　　return {
　　　　　　visibleTodos: state.todos
　　　}
}
export default connect(select)(App);

الخطوة 7-المكونات الأخرى

هذه المكونات لا يجب أن تعرف Redux.

components/AddTodo.js

import React, { Component, PropTypes } from 'react'
export default class AddTodo extends Component {}}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<input type='text' ref='input' />
　　　　　　　　　　　　<button onClick={(e) => this.handleClick(e)}>
　　　　　　　　　　　　　　　إضافة
　　　　　　　　　　　　</button>
　　　　　　　　　</div>
　　　　　　)
　　　}
　　　handleClick(e) {
　　　　　　const node = this.refs.input
　　　　　　const text = node.value.trim()
　　　　　　this.props.onAddClick(text)
　　　　　　node.value = ''
　　　}
}

components/Todo.js

import React, { Component, PropTypes } from 'react'
export default class Todo extends Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<li>
　　　　　　　　　　　　{this.props.text}
　　　　　　　　　</li>
　　　　　　)
　　　}
}

components/TodoList.js

import React, { Component, PropTypes } from 'react'
import Todo from './Todo.js'
export default class TodoList extends Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<ul>
　　　　　　　　　　　　{this.props.todos.map(todo =>
　　　　　　　　　　　　　　　<Todo
　　　　　　　　　　　　　　　　　　key = {todo.id}
　　　　　　　　　　　　　　　　　　{...todo}
　　　　　　　　　　　　　　　/>
　　　　　　　　　　　　)}
　　　　　　　　　</ul>
　　　　　　)
　　　}
}

عند بدء التطبيق، سنتمكن من إضافة المشاريع إلى القائمة.