Todo list với React Redux Starter Kit

Nếu các bạn đọc bài viết này thì chắc hẳn các bạn đã theo dõi bài trước của mình. Hôm này mình sẽ giới thiệu với các bạn cách lấy dữ liệu từ một api và tạo một danh sách đơn giản để làm quen với cấu trúc của React Redux Starter Kit. Bài viết của mình là tham khảo từ đây. Mình sử dụng code như ở đó và sẽ viết lại theo ý hiểu của mình. Các bạn có thể kham khảo cả ở đó để hiểu rõ hơn nhé. Tạm thời mình đặt tên là Todo thay cho Zen để làm việc cho dễ hiểu.

Routes index

Thêm TodoRoute(store) vào children trong ./src/routes/index.js

# ./src/routes/index.js
....
import TodoRoute from './Todo'
...
  childRoutes : [
    ...
    TodoRoute(store)
  ]
....

Header

Thêm link tới todo vào trong header thôi.

# ./src/components/Header/Header.js
{' · '}
<Link to='/todo' activeClassName='route--active'>
  Todo
</Link>

Routes Todo

Khi chúng ta thêm một trang mới thì phải tạo một routes cho nó. Thông thường các thành phần như components, containers, interfaces, modules đều được đặt ở trong một thư mục con trong ./src/routes. Ở đây ta đặt nó trong thư mục ./src/routes/Todo. Và file định nghĩa routes cho trang Todo là ./src/routes/Todo/index.js. Cũng giống như với Couter ta chỉ việc đổi lại tên và đường dẫn thôi.