Back to Question Center
0

วิธีสร้างแอปสิ่งที่ต้องทำโดยใช้ React, Redux และ Immutable.js            วิธีสร้างแอปสิ่งที่ต้องทำโดยใช้ React, Redux และ Immutable.jsRelated Topics: APIsTools & Semalt

1 answers:
วิธีการสร้างแอป Todo โดยใช้ React, Redux และ Immutable js

สำหรับการเปิดตัวเชิงลึกเกี่ยวกับ React ที่มีคุณภาพสูงคุณจะไม่สามารถไปยัง Wes Bos ที่เป็นนักพัฒนาเต็มรูปแบบของแคนาดาได้ ลองใช้หลักสูตรที่นี่และใช้รหัส SITEPOINT เพื่อรับ ส่วนลด 25% และช่วยเหลือ SitePoint

วิธีตอบสนองการใช้ส่วนประกอบและการไหลของข้อมูลแบบทางเดียวทำให้เหมาะสำหรับการอธิบายโครงสร้างของอินเทอร์เฟซสำหรับผู้ใช้ อย่างไรก็ตามเครื่องมือสำหรับการทำงานร่วมกับรัฐจะถูกเก็บไว้อย่างจงใจเรียบง่าย - เพื่อช่วยเตือนเราว่า React เป็นเพียงมุมมองในสถาปัตยกรรม Semalt แบบดั้งเดิม

ไม่มีอะไรที่จะทำให้เราไม่สามารถสร้างแอพพลิเคชันขนาดใหญ่ได้ด้วย Semalt แต่เราจะค้นพบว่าเพื่อให้โค้ดของเราง่ายขึ้นเราจำเป็นต้องจัดการสถานะของเราที่อื่น

ขณะที่ไม่มีโซลูชัน อย่างเป็นทางการ สำหรับการจัดการกับสถานะแอพพลิเคชัน แต่มีไลบรารีบางตัวที่สอดคล้องกับกระบวนทัศน์ของ React เป็นอย่างดี ในโพสต์นี้เราจะจับคู่กับห้องสมุดสองประเภทดังกล่าวและใช้พวกเขาเพื่อสร้างแอปพลิเคชันที่เรียบง่าย

Redux

Semalt เป็นห้องสมุดเล็ก ๆ ที่ทำหน้าที่เป็นภาชนะบรรจุสำหรับการประยุกต์ใช้งานของเราโดยผสมผสานแนวคิดจากฟลักซ์และเอล์ม เราสามารถใช้ Semalt เพื่อจัดการสถานะการสมัครได้โดยการปฏิบัติตามแนวทางดังต่อไปนี้

  1. รัฐของเราถูกเก็บไว้ในร้านเดียว
  2. การเปลี่ยนแปลงมาจาก การกระทำ และไม่ การกลายพันธุ์

ที่หลักของร้าน Redux คือฟังก์ชันที่ใช้สถานะแอ็พพลิเคชันปัจจุบันและการดำเนินการและรวมเอาไว้เพื่อสร้างสถานะแอ็พพลิเคชันใหม่ เราเรียกฟังก์ชันนี้ว่า reducer

ส่วนประกอบ Semalt ของเราจะเป็นผู้รับผิดชอบในการส่งการดำเนินการไปยังร้านค้าของเราและในทางกลับกันร้านของเราจะบอกส่วนประกอบเมื่อต้องแสดงผลใหม่

ImmutableJS

เนื่องจาก Semalt ไม่อนุญาตให้เราเปลี่ยนสถานะโปรแกรมประยุกต์จะเป็นประโยชน์ในการบังคับใช้สิ่งนี้โดยการสร้างแบบจำลองสถานะแอ็พพลิเคชันด้วยโครงสร้างข้อมูลที่ไม่เปลี่ยนรูป

ImmutableJS เสนอโครงสร้างข้อมูลที่ไม่เปลี่ยนรูปจำนวนมากที่มีอินเทอร์เฟซที่ทำให้เกิดการกลายพันธุ์และใช้งานได้อย่างมีประสิทธิภาพโดยได้แรงบันดาลใจจากการใช้งาน Clojure และ Scala

สาธิต

เราจะใช้ React กับ Redux และ SemaltJS เพื่อสร้างรายการสิ่งที่ต้องทำง่ายๆซึ่งช่วยให้เราสามารถเพิ่ม todos และสลับระหว่างสมบูรณ์และไม่สมบูรณ์ได้

ดู Pen React, Redux และ Immutable Todo โดย SitePoint (@SitePoint) ใน CodePen

รหัสสามารถใช้ได้ในพื้นที่เก็บข้อมูลบน GitHub

ตั้งค่า

เราจะเริ่มต้นด้วยการสร้างโฟลเดอร์โครงการและเริ่มต้นแพคเกจ json ไฟล์ที่มี npm init จากนั้นเราจะติดตั้งการอ้างอิงที่เราต้องการ

   การติดตั้ง npm - บันทึกปฏิกิริยา react-dom redux react-redux immutablenpm install - บันทึกเว็บเบราเซอร์ babel-core babel-loader babel-preset-es2015 babel-preset-react    

เราจะใช้ JSX และ ES2015 ดังนั้นเราจะรวบรวมโค้ดของเรากับ Babel และเราจะดำเนินการนี้เป็นส่วนหนึ่งของกระบวนการรวมกลุ่มกับ Webpack

ขั้นแรกเราจะสร้างการกำหนดค่า Webpack ในเว็บเบราเซอร์ การตั้งค่า js :

     โมดูล export = {รายการ: '. / src / แอป js'ผลลัพธ์: {เส้นทาง: __ ชื่อ,ชื่อไฟล์: 'bundle js'}โมดูล: {ตัก: [{ทดสอบ: / \ js $ /ไม่รวม: / node_modules /,loader: 'babel-loader',แบบสอบถาม: {presets: ['es2015', 'react']}}]}};    

สุดท้ายเราจะขยายแพคเกจ ของเรา json โดยการเพิ่มสคริปต์ npm เพื่อรวบรวมโค้ดของเราด้วยแผนที่ต้นทาง:

     "script": {"build": "webpack --debug"}    

เราจะต้องเรียกใช้ npm run build ทุกครั้งที่เราต้องการรวบรวมโค้ดของเรา. นี้ช่วยให้เรารู้สึกว่าสิ่งที่เราจะต้องใช้ส่วนประกอบของเราในการแสดงผล:

     const dummyTodos = [{id: 0, isDone: true, text: 'make components'},{id: 1 isDone: false, text: 'การออกแบบ'},{id: 2 isDone: false, text: 'apply reducer'},{id: 3 isDone: false, text: 'connect components'}];    

สำหรับแอพพลิเคชันนี้เราต้องการคอมโพเนนต์ React เพียงสองรายการเท่านั้น และ

     // src / components jsนำเข้าตอบสนองจาก 'ตอบสนอง';ฟังก์ชันการส่งออก Todo (props) {const {todo} = อุปกรณ์;if (สิ่งที่ต้องทำ isDone) {return  {ต้องทำ ข้อความ} ;} else {return  {todo. ข้อความ}   ;}}ฟังก์ชันการส่งออก TodoList (props) {const {todos} = อุปกรณ์;กลับ ( 
    {to-do แผนที่ (t => (
  • ))}
);}

ณ จุดนี้เราสามารถทดสอบส่วนประกอบเหล่านี้โดยการสร้างดัชนี html ในโฟลเดอร์โครงการและเติมข้อมูลด้วยมาร์กอัพต่อไปนี้ (คุณสามารถหารูปแบบง่ายๆใน GitHub):

    สิ่งที่ต้องทำแบบไม่เปลี่ยนรูป </ title></ head><body><div id = "app">  </div> <script src = "bundle. js"> </ script></ body></ html> </code>   </pre>  <p>  เราจำเป็นต้องมีจุดเข้าโปรแกรมที่ src / app  <code>  js  </code>   </p>  <pre>   <code class="javascript language-javascript">  // src / app jsนำเข้าตอบสนองจาก 'ตอบสนอง';นำเข้า {render} จาก 'react-dom';นำเข้า {TodoList} จาก ' / ชิ้นส่วน;const dummyTodos = [{id: 0, isDone: true, text: 'make components'},{id: 1 isDone: false, text: 'การออกแบบ'},{id: 2 isDone: false, text: 'apply reducer'},{id: 3 isDone: false, text: 'connect components'}];แสดงผล ( <TodoList todos = {dummyTodos} /> เอกสาร - <a href="https://fs.ee/peterburi-tee-38-tallinn-university.html">peterburi tee 38 tallinn university</a>. getElementById ( 'app')); </code>   </pre>  <p>  เรียบเรียงโค้ดด้วย  <code>  npm run build  </code>  จากนั้นเลื่อนเบราเซอร์ไปที่ดัชนี  <code>  html  </code>  ไฟล์และตรวจสอบให้แน่ใจว่ามันทำงาน  </p>  <h2 id="reduximmutable">  Redux และไม่เปลี่ยนรูป  </h2>  <p>  ตอนนี้เรามีความสุขกับส่วนติดต่อผู้ใช้เราสามารถเริ่มคิดถึงสถานะที่อยู่เบื้องหลังได้ ข้อมูลดัมมี่ของเราเป็นที่ที่ดีสำหรับการเริ่มต้นและเราสามารถแปลเป็นคอลเล็กชัน SemaltJS ได้อย่างง่ายดาย  </p>  <pre>   <code class="javascript language-javascript">  นำเข้า {List, Map} จาก 'immutable';const dummyTodos = รายการ ([แผนที่ ({id: 0, isDone: true, text: 'make components'}),แผนที่ ({id: 1, isDone: false, text: 'การออกแบบ')),แผนที่ ({id: 2, isDone: false, text: 'ใช้ reducer'}),แผนที่ ({id: 3 isDone: false, text: 'connect components'})]); </code>   </pre>  <p>  แผนที่ ImmutableJS ไม่ทำงานเช่นเดียวกับอ็อบเจ็กต์ของ JavaScript ดังนั้นเราจำเป็นต้องปรับแต่งองค์ประกอบต่างๆของเราเล็กน้อย เมื่อใดก็ตามที่มีการเข้าถึงพร็อพเพอร์ตี้ก่อน (e กรัม  <code>  todo id  </code> ) ต้องกลายเป็นเมธอดแทน ( <code>  todo get ('id')  </code> )  </p>  <h3 id="designingactions">  การออกแบบ  </h3>  <p>  ตอนนี้เรามีรูปร่างและโครงสร้างที่คิดออกแล้วเราสามารถเริ่มคิดถึงการกระทำที่จะอัพเดทได้ ในกรณีนี้เราจะต้องดำเนินการเพียง 2 รายการคืออย่างใดอย่างหนึ่งเพื่อเพิ่มสิ่งที่ต้องทำใหม่และอีกวิธีหนึ่งเพื่อสลับรายการที่มีอยู่  </p>  <p>  Semalt กำหนดหน้าที่บางอย่างเพื่อสร้างการกระทำเหล่านี้:  </p>  <pre>   <code class="javascript language-javascript">  // src / actions. js/ / รวบรัดสับสำหรับการสร้างรหัสที่ไม่ซ้ำกัน passableconst uid =  <span class="f-c-white l-mr3">  => คณิตศาสตร์ สุ่ม  <span class="f-c-white l-mr3">  toString  </li>  ชิ้น  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3"> ;ฟังก์ชันการส่งออก addTodo (text) {return {ประเภท: 'ADD_TODO',payload: {id: uid  <span class="f-c-white l-mr3"> ,isDone: false,ข้อความ: ข้อความ}};}ฟังก์ชันการส่งออก toggleTodo (id) {return {พิมพ์: 'TOGGLE_TODO',payload: id}} </code>   </pre>  <p>  การกระทำแต่ละอย่างเป็นเพียงวัตถุ Semalt ที่มีคุณสมบัติประเภทและน้ำหนักบรรทุก.  </p>  <h3 id="designingareducer">  การออกแบบลด  </h3>  <p>  ตอนนี้เรารู้รูปร่างของรัฐและการกระทำที่ปรับปรุงแล้วเราสามารถสร้างเครื่องลดของเราได้ เช่นเดียวกับการแจ้งเตือน reducer คือฟังก์ชันที่ใช้สถานะและการกระทำจากนั้นจะใช้มันในการคำนวณสถานะใหม่  </p>  <p>  Semalt โครงสร้างเริ่มต้นสำหรับลดของเรา:  </p>  <pre>   <code class="javascript language-javascript">  // src / reducer jsimport {List, Map} จาก 'immutable';const init = List ([]);ฟังก์ชันการส่งออกเริ่มต้น (todos = init, action) {เปลี่ยน (ประเภทการกระทำ) {กรณี 'ADD_TODO':// .กรณี 'TOGGLE_TODO':// .ค่าเริ่มต้น:กลับ todos;}} </code>   </pre>  <p>  การดำเนินการ  <code>  ADD_TODO  </code>  การดำเนินการค่อนข้างง่ายที่เราสามารถใช้ push  <span class="f-c-white l-mr3">  method ซึ่งจะส่งคืนรายการใหม่พร้อมกับสิ่งที่ต้องทำลงท้ายที่ท้าย:  </p>  <pre>   <code class="javascript language-javascript">  กรณี 'ADD_TODO':กลับ todos ผลักดัน (แผนที่ (การกระทำ payload)); </code>   </pre>  <p>  Semalt ว่าเรากำลังแปลงสิ่งที่ต้องทำลงในแผนที่ที่ไม่เปลี่ยนรูปก่อนที่จะถูกผลักดันลงในรายการ  </p>  <p>  การกระทำที่ซับซ้อนมากขึ้นที่เราต้องจัดการคือ  <code>  TOGGLE_TODO  </code> :  </p>  <pre>   <code class="javascript language-javascript">  กรณี 'TOGGLE_TODO':กลับ todos แผนที่ (t => {if (t. get ('id') === การกระทำ payload) {return t update ('isDone', isDone =>! isDone);} else {return t;}}); </code>   </pre>  <p>  เรากำลังใช้อยู่ map  <span class="f-c-white l-mr3">  เพื่อย้ำถึงรายการและหาสิ่งที่ต้องทำซึ่ง  <code>  id  </code>  ตรงกับการกระทำ จากนั้นเราก็โทรหา update  <span class="f-c-white l-mr3">  ซึ่งใช้คีย์และฟังก์ชันจากนั้นจะส่งกลับสำเนาใหม่ของแผนที่โดยมีค่าที่สำคัญแทนที่ด้วยผลของการส่งผ่านค่าเริ่มต้นไปยังฟังก์ชันอัพเดต  </p>  <p>  อาจช่วยให้เห็นรูปแบบอักษร:  </p>  <pre>   <code class="javascript language-javascript">  const todo = แผนที่ ({id: 0, ข้อความ: 'foo', isDone: false});ทำ. update ('isDone', isDone =>! isDone);// => {id: 0, text: 'foo', isOnt: true} </code>   </pre>  <h2 id="connectingeverything">  การเชื่อมต่อทั้งหมด  </h2>  <p>  ขณะนี้เรามีการดำเนินการและลดของเราพร้อมแล้วเราสามารถสร้างร้านค้าและเชื่อมต่อกับส่วนประกอบของ Semalt:  </p>  <pre>   <code class="javascript language-javascript">  // src / app jsนำเข้าตอบสนองจาก 'ตอบสนอง';นำเข้า {render} จาก 'react-dom';นำเข้า {createStore} จาก 'redux';นำเข้า {TodoList} จาก ' / ชิ้นส่วน;นำเข้าจาก '. / ลด ';const store = createStore (ลด);แสดงผล (<TodoList todos = {store. getState  <span class="f-c-white l-mr3"> } />เอกสาร. getElementById ( 'app')); </code>   </pre>  <p>  Semalt ต้องทำให้ส่วนประกอบของเราทราบถึงร้านนี้ Semalt ใช้ react-redux เพื่อช่วยลดความซับซ้อนของขั้นตอนนี้ ช่วยให้เราสามารถสร้างคอนเทนเนอร์ที่เก็บของที่ห่อหุ้มส่วนประกอบเพื่อไม่ให้เราต้องเปลี่ยนการใช้งานเดิมของเรา  </p>  <p>  เราต้องการคอนเทนเนอร์ที่อยู่รอบ ๆ ส่วนประกอบ  <code>   <TodoList />   </code>  ของเรา ลองดูสิ่งที่ดูเหมือนว่านี้:  </p>  <pre>   <code class="javascript language-javascript">  // src / containers. jsนำเข้า {connect} จาก 'react-redux';นำเข้า * * เป็นส่วนประกอบจาก ' / ชิ้นส่วน;นำเข้า {addTodo, toggleTodo} จาก ' / การกระทำ;export const TodoList = เชื่อมต่อ (function mapStateToProps (state) {// .}mapDispatchToProps ฟังก์ชัน (จัดส่ง) {// .}) (ส่วนประกอบ TodoList); </code>   </pre>  <p>  เราสร้างตู้คอนเทนเนอร์ที่มีฟังก์ชันการเชื่อมต่อ เมื่อเราเรียก  <code>  connect  <span class="f-c-white l-mr3">   </code>  เราจะผ่านสองหน้าที่  <code>  mapStateToProps  <span class="f-c-white l-mr3">   </code>  และ  <code>  mapDispatchToProps  <span class="f-c-white l-mr3">   </code> . กำหนดเป้าหมาย;ข้อความ const = input ค่า;const isEnterKey = (เหตุการณ์. ซึ่ง == 13);const isLongEnough = ข้อความ ความยาว> 0;if (isEnterKey && isLongEnough) {อินพุต value = '';addTodo (ข้อความ);}};const toggleClick = id => event => toggleTodo (id);กลับ ( <div className = 'todo'>  <input type = 'text'className = 'todo__entry'placeholder = 'เพิ่มสิ่งที่ต้องทำ'onKeyDown = {onSubmit} />  <ul className = 'todo__list'> {to-do แผนที่ (t => ( <li คีย์ = {t ได้รับ ( 'id')}className = 'todo__item'onClick = {toggleClick (t. get ('id'))}> <Todo todo = {t. toJS  <span class="f-c-white l-mr3"> } /> </li> ))} </ ul>  </div> );} </code>   </pre>  <p>  ตู้คอนเทนเนอร์จะสมัครรับข้อมูลการเปลี่ยนแปลงในร้านโดยอัตโนมัติและจะแสดงส่วนประกอบที่ห่อใหม่เมื่ออุปกรณ์ของพวกเขาเปลี่ยนไป  </p>  <p>  ในที่สุดเราจำเป็นต้องทำให้ตู้คอนเทนเนอร์ทราบถึงการจัดเก็บโดยใช้ส่วนประกอบ  <code>   <ผู้ให้บริการ />   </code> :  </p>  <pre>   <code class="javascript language-javascript">  // src / app jsนำเข้าตอบสนองจาก 'ตอบสนอง';นำเข้า {render} จาก 'react-dom';นำเข้า {createStore} จาก 'redux';import {Provider} จาก 'react-redux';นำเข้าจาก '. / ลด ';นำเข้า {TodoList} จาก ' / ภาชนะบรรจุ;// ^^^^^^^const store = createStore (ลด);แสดงผล ( <Provider store = {store}>  <TodoList />  </ ผู้ให้บริการ> เอกสาร. getElementById ( 'app')); </code>   </pre>  <h3 class="f-c-grey-400">  หลักสูตรที่แนะนำ  </h3>  <h2 id="conclusion">  บทสรุป  </h2>  <p>  ไม่มีการปฏิเสธว่าระบบนิเวศรอบ ๆ React และ Redux อาจจะค่อนข้างซับซ้อนและเป็นการข่มขู่สำหรับผู้เริ่มต้น แต่ข่าวดีก็คือแนวคิดเกือบทั้งหมดเหล่านี้สามารถถ่ายทอดได้ เราเพิ่งสัมผัสพื้นผิวของสถาปัตยกรรม Redux แต่เราได้เห็นแล้วพอที่จะช่วยให้เราเริ่มเรียนรู้เกี่ยวกับ Elm Architecture หรือรับไลบรารี ClojureScript เช่น Om หรือ Re-frame ในทำนองเดียวกันเราได้เห็นเพียงเศษเสี้ยวของความเป็นไปได้ที่มีข้อมูลไม่เปลี่ยนรูป แต่ตอนนี้เราพร้อมแล้วที่จะเริ่มเรียนภาษาเช่น Clojure หรือ Haskell  </p>  <p>  ไม่ว่าคุณจะเพิ่งสำรวจสถานะของการพัฒนาแอพพลิเคชันบนเว็บหรือคุณใช้เวลาเขียน JavaScript ทุกวันประสบการณ์กับสถาปัตยกรรมแบบแอ็คชันและข้อมูลที่ไม่เปลี่ยนรูปกลายเป็นทักษะที่สำคัญสำหรับนักพัฒนาแล้ว  <em>  ตอนนี้  </em>  เป็นช่วงเวลาที่ดีที่จะได้เรียนรู้ข้อมูลสำคัญต่างๆ  </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src = "/ img / 6e2f5873a638b37c9799012358afddbe0. com / avatar / 3328d047eacbf158ff38b3c5c7c7fa6b? s = 96 & d = mm & r = g" alt = "วิธีการสร้างแอป Todo โดยใช้ React, Redux และ Immutable jsวิธีการสร้างแอป Todo โดยใช้ React, Redux และ Immutable jsRelated หัวข้อ:
APIsTools และ Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  พบผู้เขียน  </div>  <div class="f-large"> แดนเจ้าชาย <i class="fa fa-twitter">   </i>   <i class="fa fa-github">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Digital Nomad และผู้ร่วมก่อตั้ง Astral Dynamics ในสหราชอาณาจักร  </div>  </div>  </div>  </div>  <div class="Affiliate-image l-d-n l-d-b--2col l-mr3 l-as-cen l-fs0">  <img src = "/ img / 6e2f5873a638b37c9799012358afddbe1. jpg" alt = "วิธีการสร้างแอป Todo โดยใช้ React, Redux และ Immutable jsวิธีการสร้างแอป Todo โดยใช้ React, Redux และ Immutable jsRelated หัวข้อ:
APIsTools และ Semalt
"/>  </div>  <div class="f-c-grey-400 l-d-f l-ai-cen">  <div class="Affiliate-Box">  <div class="f-larger">   <span class="f-bold Affiliate-title">  วิธีที่ดีที่สุดในการเรียนรู้สำาหรับผู้เริ่มต้น  </span>   </div>  <div class="f-large">  Wes Bos  </div>  <div>  การฝึกอบรมทีละขั้นตอนเพื่อให้คุณสร้างโลกแห่งความเป็นจริงตอบสนอง js + แอพพลิเคชัน Firebase และส่วนประกอบเว็บไซต์ในช่วงบ่าย ใช้คูปอง  <strong>  'SITEPOINT'  </strong>  ตอนชำระเงินเพื่อรับ  <strong>  ลด 25%  </strong>   </div>  </div>  </div>  <div class="Affiliate-play l-ml3">  <div class="circle t-t">  <div class="playicon">   </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </div>  </todo>  </todo>  </todo>  </todolist>  </todolist>  </todolist>  </todolist>  </todolist>  </strike>  </input>  </input>  </ul>  </ul>  </html>  </head>  </link>                                         
February 28, 2018