ReactJS使用助焊剂

在本章中，我们将学习如何在React应用程序中实现通量模式。我们将使用 Redux 框架。本章的目标是介绍连接 Redux 和 React 所需的每个部件的最简单示例。

第1步 - 安装Redux

我们将通过 命令提示符 窗口来安装Redux 。

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

第2步 - 创建文件和文件夹

在这一步中，我们将为我们的操作， 缩减器 和组件创建文件夹和文件。完成之后，这就是文件夹结构的外观。

React Redux文件夹结构

第3步 - 行动

操作是JavaScript对象，它使用 type 属性来通知应该发送到商店的数据。我们正在定义 ADD_TODO 操作，将用于将新项目添加到我们的列表中。该 addTodo 功能是一个行动的创建者，返回我们的行动，并设置一个 ID 为每个创建的项目。

动作/ actions.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

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

第4步 - 减速器

虽然操作只会触发应用程序中的更改，但 减法器会 指定这些更改。我们使用 switch 语句来搜索 ADD_TODO 操作。reducer是一个函数，它需要两个参数（状态和动作）来计算并返回更新的状态。

第一个函数将用于创建一个新项目，而第二个函数将把该项目推送到列表中。最后，我们正在使用 combineReducers 辅助函数，我们可以添加我们将来可能使用的任何新的reducer。

减速器/ reducers.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步 - 存储

商店是一个拥有应用程序状态的地方。一旦你拥有减速器，创建一个商店是非常容易的。我们将商店属性传递给包装我们的路由组件的 提供者 元素。

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步 - 根组件

所述应用组件是应用程序的根组件。只有根组件应该知道一个redux。需要注意的重要部分是用于将我们的根组件 App 连接到商店的连接功能。

该函数将选择函数作为参数。选择函数从商店获取状态并返回我们可以在我们的组件中使用的道具（ visibleTodos ）。

App.js

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。

组件/ 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 = ''
   }
}

组件/ Todo.js

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

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

组件/ 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>
      )
   }
}

当我们启动应用程序时，我们将能够添加项目到我们的列表。

React Redux示例