بخش های اصلی

آموزش ReactJS

ReactJS – نحوه ی استفاده از Flux

در این بخش نحوه ی پیاده سازی الگویِ flux در برنامه های React را آموزش میدیم. برای این آموزش از فریم ورکِ Redux استفاده می کنیم. هدف این مقاله اینه که ساده ترین مثال ها را از هر قسمتی که نیاز به اتصال به Redux و React داشته باشه به شما ارائه بده.

مرحله 1 – نصبِ Redux

Redux را با استفاده از پنجره اعلان فرمان (command prompt) نصب می کنیم.

C:UsersusernameDesktopreactApp>npm install --save react-redux

مرحله 2 – ایجاد فایل ها و فولدرها

در این مرحله فولدرها و فایل هایی را برای actionها، reducerها و componentها ایجاد می کنیم. بعد از پایان کار، باید ساختار فولدر ها بصورت زیر باشه:

react redux folder structure

مرحله 3 – Actionها

Actionها، شیءهای جاوا اسکریپتی هستن که برای مطلع شدن از داده هایی که باید به store فرستاده بشن، از پراپرتیِ type استفاده می کنن. در این مثال actionای با نام ADD_TODO تعریف می کنیم که برای اضافه کردن آیتم جدید به لیست استفاده میشه. تابعِ addTodo یک action  از نوعِ creator است که actionمان را برمی گرداند و برای هر آیتمی که ایجاد شده یک id تعیین می کنه.

actions/actions.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

export function addTodo(text) {
   return {
      type: ADD_TODO,
      id: nextTodoId++,
      text
   };
}

مرحله 4 – Reducerها

در حالی که Actionها فقط تغییرات را در برنامه انجام میدن، reducerها آن تغییرات را تعیین می کنن. در این مثال از عبارتِ switch برای جستجویِ actionای با نام ADD_TODO استفاده می کنیم. reducer، تابعیِه که برای انجام محاسبات، دو پارامتر (state و action) می گیره و state  (وضعیت) به روز رسانی شده را برمی گرداند. اولین تابع، برای ایجاد آیتم های جدید استفاده میشه، در حالی که تابع دومی، آیتم ایجاد شده را توی لیست، push میکنه (قرار میده). در انتها از تابعِ helperای با نام combineReducers استفاده می کنیم که در آینده هر reducer جدیدی که بخواهیم را می توانیم به آن اضافه کنیم.

reducers/redusers.js

import { combineReducers } from 'redux'
import { ADD_TODO } from '../actions/actions'

function todo(state, action) {
   switch (action.type) {
	
      case ADD_TODO:
         return {
            id: action.id,
            text: action.text,
         }
			
      default:
      return state
   }
}

function todos(state = [], action) {
   switch (action.type) {
	
      case ADD_TODO:
         return [
            ...state,
            todo(undefined, action)
         ]
			
      default:
      return state
   }
}

const todoApp = combineReducers({
   todos
})

export default todoApp

مرحله 5 – Store

store مکانی برای نگه داری state (وضعیت) برنامه ست. اگه reducerها را داشته باشین، ایجادِ store خیلی راحتِه. در این مثال پراپرتیِ store را که کامپوننتِ route در آن قرار می گیره، به عنصرِ provider پاس میدیم.

main.js

import React from 'react'

import { render } from 'react-dom'
import { createStore } from '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  - کامپوننتِ Root

کامپوننتِ App، کامپوننتِ ریشه ی (root) برنامه ست. فقط باید کامپوننتِ ریشه، (root) از redux مطلع باشه. چیز مهمی که باید یادآور بشیم، تابعِ connect است که برای برقراری ارتباط میان کامپوننتِ App و store استفاده می شه. این تابع، تابعِ select را بعنوان آرگومان میگیره. تابعِ select، state (وضعیت) را از store میگیره و propهایی (visibleTodos) که می توانیم در کامپوننت مان از آن ها استفاده کنیم را بر می گرداند.

App.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'

import AddTodo from './components/AddTodo.jsx'
import TodoList from './components/TodoList.jsx'

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)}>
               Add
            </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.jsx'

export default class TodoList extends Component {
   render() {
      return (
         <ul>
            {this.props.todos.map(todo ⇒
               <Todo
               key = {todo.id}
               {...todo}
               />
            )}
         </ul>
      )
   }
}

با اجرای برنامه، می توانید آیتم ها را به لیست اضافه کنین.

 

react redux example

 

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد