Redux hook - đã sướng lại còn sướng hơn

Trong version 16.8 gần đây, trang chủ của reactjs đã công bố chính thức việc đưa vào sử dụng react hooks sau thời gian thử nghiệm. các bạn có thể xem tại đây với nhiều tính năng mới như khả năng sử dụng local state trong component, xử lý side effects và nhiều thứ khác.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Nghe thôi đã thấy sướng rồi. Nhưng còn nhiều hơn thế, nhưng bài viết này sẽ không tập chung vào react hook mà tôi muốn nói đến redux hook (một thứ rất được recommend dùng với react).

Tại sao lại có redux hook, đơn giản thôi, redux sống với react, khi react thay đổi thì nó cũng cần thay đổi chứ sao!

Reac Redux hiện tại cũng đã cũng cấp API hook để thay thể connect() ở HOC như trước đây. API này cho phép bạn đăng ký tới Redux store và dispath actions. mà không cần phải sử dụng connect để wrap component.

Chú ý: React redux hook được thêm vào từ version v7.1.0 (No Breaking Changes).

Nội dung bài viết:

• useSelector()
• useDispatch()
• useStore()
• Chú ý khi dùng
• Một vài hooks hữu ích

Sử dụng Hooks trong React Redux()

Nếu trước đây bạn sử dụng connect(), và bạn phải wrapp App component của bạn bằng 1 component là <Provider> như ví dụ này:

const store = createStore(rootReducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

với bạn update mới, bạn có thể import và sử dụng bất ký thứ gì trong React redux hook api vào trực tiếp function component.