React native และ Redux

ปัญหาของ React native เมื่อโปรเจ็กของเราเริ่มใหญ่ขึ้นเรื่อยๆ เมื่อมี Component หลายๆตัว แต่ Component เหล่านั้นมี State เป็นของตัวเองและเก็บค่า ที่เหมือนกัน ที่นี่ละปัญหาจะอยู่ตรงที่ พอ ค่าใน State ตัวใดตัวหนึ่งเปลี่ยนไป ก็ต้องไปไล่อัพเดทอีกหลายๆ ตัวที่เหลือตามก็จะเกิดปัญหายุ่งยาก อาจจะลืมตัวใดตัวหนึ่งไป ฉะนั้นถ้าจับ State พวกนั้นมาอยู่ที่เดียวกันละ จะง่ายกว่ามั้ย

ref. https://www.slideshare.net/binhqdgmail/006-react-redux-framework

เรามาเริ่ม Coding กันเลยครับ เพื่อความรวดเร็ว

1 initialState

ขั้นตอนนี้เราจะทำการสร้าง State ของเราขึ้นมาว่าจะมีค่าอะไรบ้าง ขั้นตอนนี้ ผมจะ set Default ให้กับค่าต่างๆ ใน State

ส่วนนี้จะเป็น function ในการเข้าถึงและจัดการค่าใน State ของเรา หลักการคือจะรับ action.type เข้ามาแล้วแยกว่าแต่ละ action จะ update ค่าอะไรใน State (action.txt ..etc) คือ value ที่เราส่งเข้ามา update

ที่ต้อง …state เพราะว่าทุก action จะทำการทับ state เดิม เลยต้องทำการ set ค่าจาก state ก่อนหน้าก่อนแล้วค่อย update ค่าใน Field ที่ต้องการ

โดย Code สองส่วนนี้จะอยู่ใน file ชื่อ Datacomponent.js folder Reducers

2 createStackNavigator

ขั้นตอนนี้เรามี Page file กี่ page เราก็ map ให้ตรงกับ screen เลยครับ

Home: { screen: Home }; page ชื่อ Home เมพให้ตรงกับ screen:Home ก็คือ

import Home from ‘../Page/Home’; Home หลัง screen คือ ไฟล์ /Page/Home

โดย Code ในส่วนนี้จะอยู่ใน file AppNavigator.js folder navigators

3 combineReducers

ขั้นตอนนี้จะนำ store ที่เราใช้เก็บ State มารวมกันครับ บางโปรเจ็กอาจจะมี ได้หลาย Store เราก็ import เข้ามาครับ แล้ว Combine รวมกัน

ใน file นี้จะมี function nav คอยรับ Action เข้ามาเพื่อทำการเปลี่ยน page

ขั้นตอนนี้จะทำการสร้าง Store ใช้เก็บ State ที่เราต้องการครับ รวมทั้ง ตัว navigator ด้วยครับ เก็บ nav (navigator) ไว้เป็น State ใน Store ตัวนึง

วิธีการคือเราก็ส่ง action.type เข้ามา ทำการ maping ให้ตรงกับ routeName เพียงเท่านี้เราก็จะ action ไปหา page ต่างๆ ได้แล้วครับ

โดย Code ในส่วนนี้จะอยู่ใน file index.js folder Reducers

4 configureStore

ตัว Middleware ที่ผมใช้จะเป็น thunk นะครับ

ส่วน import { AppNavigator, middleware } from ‘./navigators/AppNavigator’; middleware ตัวนี้จะเป็นของ ReactNavigationReduxMiddleware .

Middleware จะมาคั่น ก่อนที่ dispatch action จะไปถึง reducer(เพื่อจัดการ Store) สามารถให้ทำ function อะไรซักอย่างก่อนได้ครับ จะประมาณตัวอย่างด้านล่างครับ

const myMiddleware = store => next => action => {
console.group(action.type)
console.log(‘current state’, store.getState())
console.log(‘dispatching’, action)
const result = next(action)
console.log(‘next state’, store.getState())
console.groupEnd(action.type)
return result
}
const Middlewares = [thunk, myMiddleware]
let store = createStore(app, applyMiddleware(…Middlewares,middleware))
return store

import app from ‘./Reducers’ จะ ระบุ path ไฟล์ไปหา ไฟล์ index.js folder Reducers

ผ่านสองขั้นตอนข้างบนเราก็จะได้ Store กลางไว้เก็บ State แล้วครับ อยู่รวมกันที่เดียวเลยครับ

โดย Code ในส่วนนี้จะอยู่ใน file configureStore.js ไม่อยู่ใน folder

5 Action

ส่วนนี้ จะเป็นการจัดการกับ state ที่เก็บอยู่ใน Store ครับ โดยการ Set ค่า type กับ data ที่เราต้องการ

ส่วนนี้จะเป็นการเปลี่ยน Screen ครับ เราก็ set ค่า type เป็นชื่อ Screen ของเราครับ

หลักการทำงาน

ref. https://blog.codecentric.de/en/2017/12/developing-modern-offline-apps-reactjs-redux-electron-part-3-reactjs-redux-basics/

dispatch เราสามารถ dispatch โดยการส่ง parameter เป็น function ที่เราต้องการเข้าไปครับก็จะได้เป็น Action ไปหา Reduce

Reduce ตัว Reduce จะไปแกะ Action ที่เรา Set เป็น object ออกว่าเราจะ update ค่าตัวไหน ใน State นั้นก็คือ action.type นั้นเองที่เป็นตัวกำหนด พร้อมกับ action.data นั้นก็คือค่าที่เราจะทำการ update นั้นเอง

Subscibe พอเสร็จกระบวนการ จัดการ state ใน store View ทำการ subscibe store อยู่แล้ว ก็จะ update ตามครับ

โดย Code ในส่วนนี้จะอยู่ใน file action.js ไม่อยู่ใน folder

6 connect

mapStateToProps ส่วนนี้จะเป็นการ นำ State ใน Store มาใส่ใน props ของ page ของเรา สามารถเข้าถึงข้อมูลแบบนี้ได้เลยครับ

const { HistoryChatbuying, actionDelete } = this.props.Datacomponent;

mapDispatchToProps ส่วนี้จะเป็นการ สร้าง function เพื่อ dispatch action ใส่ใน props เวลาเรียกใช้ก็ใช้แบบนี้ได้เลยครับ

this.props.onArrayChange(‘HistoryChatbuying’, arr);

ถ้าเราจะเปลี่ยน page screen เราก็ใช้วิธีนี้ได้เลยครับ

this.props.GotoMessage(item.buying)

โดย Code ในส่วนนี้จะอยู่ใน file page.js folder Page

7 Provider

ส่วนนี้จะอยู่ใน file index ของ App (App.js) เป็นส่วนในการ configureStore เข้ากับ Provider เพื่อทำการ initialState และสร้าง AppNavigator เป็น main Container เพื่อรองรับในการ push page แต่ละ page เข้ามา

โดย Code ในส่วนนี้จะอยู่ใน file App.js ไม่อยู่ใน folder (index file)

++++++++++++++++++++++++++++++++++++++++