ReactJS 트랜스폰드 사용

이 장에서는 React 애플리케이션에서 풍선 모드를 구현하는 방법을 배웁니다. Redux 프레임워크를 사용합니다. 이 장의 목표는 Redux와 React를 연결하는 데 필요한 각 부분의 가장 간단한 예제를 보여주는 것입니다.

단1단계-Redux 설치

우리는 다음과 같이 Redux를 설치합니다.명령 프롬프트윈도우에서 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- actions

actions는 JavaScript 객체로서, 이를 사용합니다.type속성은 데이터가 매장에 전송되어야 한다고 알리는 것입니다. 우리는ADD_TODO새 항목을 목록에 추가하는 작업을 사용합니다. 이addTodo함수는 액션 생성자이며, 우리의 액션을 반환하고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-Reducers

작업은 애플리케이션에서의 변경을 트리거할 수 있지만, reducer는 이러한 변경을 지정합니다. 우리는 ADD_TODO 작업을 검색하는 switch 문을 사용하고 있습니다. reducer는 두 개의 매개변수(state와 action)를 받아서, 업데이트된 상태를 계산하고 반환하는 함수입니다.

첫 번째 함수는 새 항목을 생성하며, 두 번째 함수는 이 항목을 목록에 추가합니다. 마지막으로, combineReducers 조력자 함수를 사용하여 여러 가지 새로운 reducer를 추가할 수 있는 위치에 추가합니다.

reducers / 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-Store

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단계-루트 컴포넌트

App 컴포넌트는 애플리케이션의 루트 컴포넌트입니다. 루트 컴포넌트 만이 redux를 알아야 합니다. 주의해야 할 중요한 부분은 루트 컴포넌트 App를 스토어에 연결하는 connect 함수입니다.

이 함수는 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)}>
　　　　　　　　　　　　　　　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.js
export default class TodoList extends Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<ul>
　　　　　　　　　　　　{this.props.todos.map(todo =>
　　　　　　　　　　　　　　　<Todo
　　　　　　　　　　　　　　　　　　key = {todo.id}
　　　　　　　　　　　　　　　　　　{...todo}
　　　　　　　　　　　　　　　/>
　　　　　　　　　　　　)}
　　　　　　　　　</ul>
　　　　　　)
　　　}
}

애플리케이션을 시작할 때, 우리는 프로젝트를 목록에 추가할 수 있습니다.