Trong bài viết trước, chúng ta đã setup thành công ứng một ứng một starter cho Electron App sử dụng React, Webpack. Tiếp theo chúng ta sẽ thêm các thành phần cần thiết trong một ứng dụng cần thiết vào starter trên đó là: Redux và Router.

1. Thêm Router

Trước tiên ta sẽ cái package react-router-dom để sử dụng các hàm trong việc routing

$ yarn add react-router-dom

Đối với việc routin trong Electron App dùng React sẽ khác với việc routing khi làm web application là chúng ta sẽ sử dụng HashRouter. Lý do là dùng hashrouter sẽ không thay khiến ứng dụng phải reload khi chúng ta routing.

Chúng ta tiến hành thêm HashRouter vào ứng dụng như sau:

Trong src/index.jsx, ta import thêm HashRouter và Route, sau đó wrap component App bằng HashRouter:

// Code import { HashRouter, Route } from 'react-router-dom'; // Code render( <HashRouter> <Route path="/" component={App} /> </HashRouter> document.getElementById('root'), );

Tạo file src/screen/App/App.jsx, với nội dung như sau:

import React from 'react'; import { Route, Switch } from 'react-router-dom'; import Home from '../Home'; import Todos from '../Todos'; const App = () => ( <Switch> <Route exact path="/" component={Home} /> <Route exact path="/todos" component={Todos} /> </Switch> ); export default App;

Trong này chúng ta sẽ có 2 Route đến 2 trang là Home page (/) và Todo page (/todos)

Tiếp đó ta tạo 2 component tương ứng với 2 page này

// src/screens/Home/Home.jsx import React from 'react'; import { Link } from 'react-router-dom'; const Home = () => ( <div className="Home"> <h1>Hello, electron!</h1> <p>Let's start building your awesome desktop app with electron and React!</p> <Link to="/todos">Todo</Link> </div> ); export default Home;

// src/screens/Todos/Todos.jsx import React from 'react'; import { Link } from 'react-router-dom'; const Todos = () => ( <div className="TodoList"> <h1>Todo List</h1> <Link to="/"> Back to home </Link> </div> ); export default Todos;

Như vậy là chúng ta đã tiến hành xong routing cho app. Giờ khi chạy, bạn sẽ thấy Home page có một link dẫn đến Todo page, khi vào Todo page bạn có thể navigate về lại Home bằng link Back to home. Sau này khi muốn thêm nhiều route hơn bị chỉ cần tạo page tương ứng trong thư mục screens và thêm vào App.jsx với route tương ứng.

2. Thêm Todo list sử dụng redux

Trước tiên chúng ta sẽ cài redux và react-redux. Đồng thời cài thêm redux-logger để debug

$ yarn add redux react-redux redux-logger

Tiếp theo chúng ta sẽ tạo action. Trong bài viết này mình chỉ ví dụ với 1 action là addTodo để dùng cho Todos page

// src/actions/todoAction.js import { TODO_ACTIONS } from '../constants/actionTypes'; const addTodoAction = (todo) => ({ type: TODO_ACTIONS.ADD_TODO, payload: todo, }); export { addTodoAction };

Sau đó ta sẽ để actionTypes trong constants

// src/constants/actionTypes.js export const TODO_ACTIONS = { ADD_TODO: 'ADD_TODO', };

Tiếp đó sau khi tạo action xong, chúng ta chuyển sang reducers. Tạo thư mục src/reducers trong đó chứa 3 file index.js(chứa root reducers), initialState.js (trạng thái ban đầu của store) và todoReducers.js;

// initialState.js export const initialState = { todos: [], };

Lúc này initial State sẽ có dạng là 1 mảng todos rỗng. Khi có todo mới được thêm sẽ thêm vào mảng này

// todoReducers.js import { TODO_ACTIONS } from '../constants/actionTypes'; import { initialState } from './initialState'; const todoReducer = (state = initialState.todos, action) => { switch (action.type) { case TODO_ACTIONS.ADD_TODO: return [...state, action.payload]; default: return state; } }; export default todoReducer;

Trong todoReducers, ta sẽ kiểm tra xem, nếu action là ADD_TODO thì ta sẽ cập nhật lại state bằng thêm todo vừa được tạo vào mảng todos ở trên

// index.js import { combineReducers } from 'redux'; import todoReducer from './todoReducers'; const rootReducer = combineReducers({ todos: todoReducer, }); export default rootReducer;

Sau khi xong todoReducer, chúng ta sẽ gắn nó vào root reducer để sử dụng

Bước tiếp theo chúng ta sẽ “take care” đến store. Tạo file src/store.js với nội dung như sau

// store.js import { applyMiddleware, createStore } from 'redux'; import logger from 'redux-logger'; import reducers from './reducers'; const configStore = () => { const middleWares = []; if (process.env.NODE_ENV === 'development') { middleWares.push(logger); } const store = createStore(reducers, applyMiddleware(...middleWares)); return store; }; export default configStore;

Ở đây chúng ta sẽ tạo store để quản lý state cho toàn bộ ứng dụng. Đồng thời sẽ thêm middleware redux-logger trong quá trình dev để debug. (Lưu ý, khi build production sẽ không load middleware này vào store).

Tiếp theo, ta gắn store vào React app

// index.jsx import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { HashRouter, Route } from 'react-router-dom'; import configStore from './store'; import App from './screens/App'; const store = configStore(); const root = document.createElement('div'); root.id = 'root'; document.body.appendChild(root); render( <Provider store={store}> <HashRouter> <Route path="/" component={App} /> </HashRouter> </Provider>, document.getElementById('root'), );

Bước tiếp theo là sẽ sử dụng Redux để quản lý state của todo list. Tạo các component sau: Input, TodoItem, TodoList
Note: Phần sử dụng useSelector và useDispatch mình đã có dùng ở đây nên các bạn xem nhé. Mình sẽ lướt qua phần này

Sau khi đã tạo các component xong, chúng ta chỉ cần import vào Todo page là xong

// src/screens/Todo/Todo.jsx import React from 'react'; import { Link } from 'react-router-dom'; import { TodoList } from '../../components'; const Todos = () => ( <div className="TodoList"> <h1>Todo List</h1> <TodoList /> <Link to="/"> Back to home </Link> </div> ); export default Todos;

Vậy là ta đã hoàn thành xong việc tích hợp Redux vào ElectronApp của chúng ta. Và đây là kết quả:

Kết

Như vậy là chúng ta đã hoàn thành xong chuỗi bài viết về ElectronJS. Mình có để link source code trên github cho mọi người tham khảo. Nếu có ý kiến đóng góp, đừng ngần ngại để lại comment nhé. Thanks

Reference:

HashRouter: https://reactrouter.com/web/api/HashRouter
Redux: https://redux.js.org/api/api-reference