ReactJS - Sử dụng Flux

Trong chương này, chúng ta sẽ học cách triển khai mẫu dòng trong các ứng dụng React. Chúng tôi sẽ sử dụngReduxkhuôn khổ. Mục tiêu của chương này là trình bày ví dụ đơn giản nhất về mọi phần cần thiết để kết nốiRedux và React.

Bước 1 - Cài đặt Redux

Chúng tôi sẽ cài đặt Redux thông qua command prompt cửa sổ.

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

Bước 2 - Tạo tệp và thư mục

Trong bước này, chúng tôi sẽ tạo các thư mục và tệp cho actions, reducersvà components. Sau khi hoàn tất, đây là cách cấu trúc thư mục sẽ như thế nào.

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

Bước 3 - Hành động

Các hành động là các đối tượng JavaScript sử dụng typetài sản để thông báo về dữ liệu sẽ được gửi đến cửa hàng. Chúng tôi đang xác địnhADD_TODOhành động sẽ được sử dụng để thêm mục mới vào danh sách của chúng tôi. CácaddTodo hàm là một trình tạo hành động trả về hành động của chúng tôi và đặt một id cho mọi mục đã tạo.

hành động / hành động.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

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

Bước 4 - Bộ giảm tốc

Trong khi các hành động chỉ kích hoạt các thay đổi trong ứng dụng, reducerschỉ định những thay đổi đó. Chúng tôi đang sử dụngswitch tuyên bố để tìm kiếm một ADD_TODOhoạt động. Bộ giảm là một hàm nhận hai tham số (state và action) để tính toán và trả về trạng thái cập nhật.

Chức năng đầu tiên sẽ được sử dụng để tạo một mục mới, trong khi chức năng thứ hai sẽ đẩy mục đó vào danh sách. Về cuối, chúng tôi đang sử dụngcombineReducers chức năng trợ giúp nơi chúng tôi có thể thêm bất kỳ bộ giảm mới nào mà chúng tôi có thể sử dụng trong tương lai.

giảm bớt / giảm bớt.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

Bước 5 - Lưu trữ

Cửa hàng là nơi lưu giữ trạng thái của ứng dụng. Rất dễ dàng để tạo một cửa hàng sau khi bạn có bộ giảm giá. Chúng tôi đang chuyển tài sản của cửa hàng đếnprovider phần tử bao bọc thành phần tuyến đường của chúng tôi.

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
)

Bước 6 - Thành phần gốc

Các Appthành phần là thành phần gốc của ứng dụng. Chỉ thành phần gốc mới được biết về một redux. Phần quan trọng cần lưu ý làconnect hàm được sử dụng để kết nối thành phần gốc của chúng tôi App đến store.

Chức năng này có selectchức năng như một đối số. Chức năng chọn lấy trạng thái từ cửa hàng và trả về các đạo cụ (visibleTodos) mà chúng tôi có thể sử dụng trong các thành phần của mình.

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);

Bước 7 - Các thành phần khác

Các thành phần này không nên biết về redux.

thành phần / 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 = ''
   }
}

thành phần / Todo.js

import React, { Component, PropTypes } from 'react'

export default class Todo extends Component {
   render() {
      return (
         <li>
            {this.props.text}
         </li>
      )
   }
}

thành phần / 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>
      )
   }
}

Khi chúng tôi khởi động ứng dụng, chúng tôi sẽ có thể thêm các mục vào danh sách của mình.