Trong bài này, chúng ta sẽ học cách triển khai mô hình dòng chảy trong các ứng dụng React. Chúng tôi sẽ sử dụng Redux framework. 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ối Redux và React .
Bước 1 – Cài đặt Redux
Chúng tôi sẽ cài đặt Redux thông qua cửa sổ nhắc lệnh .
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 các hành động , bộ giảm và thành phần của chúng tôi . Sau khi chúng ta 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 thuộc tính kiểu để thông báo về dữ liệu sẽ được gửi đến cửa hàng. Chúng tôi đang xác định hành động ADD_TODO sẽ được sử dụng để thêm mục mới vào danh sách của chúng tôi. Hàm addTodo là một trình tạo hành động trả về hành động của chúng ta 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
Mặc dù các hành động chỉ kích hoạt các thay đổi trong ứng dụng, nhưng bộ giảm chỉ định các thay đổi đó. Chúng tôi đang sử dụng câu lệnh switch để tìm kiếm hành động ADD_TODO . Bộ giảm là một hàm nhận hai tham số ( trạng thái và hành động ) để 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. Cuối cùng, chúng tôi đang sử dụng chức năng trợ giúp connectReducers , 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ó các bộ giảm bớt. Chúng tôi đang chuyển thuộc tính cửa hàng cho phần tử nhà cung cấp , phần tử này 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
Thành phần ứng dụng 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à chức năng kết nối được sử dụng để kết nối Ứng dụng thành phần gốc của chúng tôi với cửa hàng .
Hàm này nhận hàm select làm đối số. Chức năng Select lấy trạng thái từ cửa hàng và trả về các đạo cụ ( Visidos ) mà chúng ta 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
Những 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.
